英文:
Column wrappring in Bootstrap 5
问题
在大屏幕上，我希望列1和列2并排显示，列3显示在列1的下方。它可以工作，但如果列2中的内容较多，会在列1和列3之间产生大量空白空间。如附图所示。
如何解决这个问题，以便在大屏幕上列3直接显示在列1下方，即使列2中的内容更多/更大，也是如此。
大屏幕：
小屏幕
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="row">
<div class="col-lg-6">
<p>列1</p>
<p>
文本1 文本1 文本1 文本1 文本1 文本1 文本1 文本1 文本1 文本1 文本1 文本1 文本1 文本1 文本1 文本1 文本1 文本1 文本1 文本1 文本1 文本1
</p>
</div>
<div class="col-lg-6">
<p>列2</p>
<p>
文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2
文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2
文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2
文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2 文本2
</p>
</div>
<div class="col-lg-6">
<p>列3</p>
<p>
文本3 文本3 文本3 文本3 文本3 文本3 文本3 文本3 文本3 文本3 文本3 文本3 文本3 文本3 文本3 文本3 文本3 文本3 文本3 文本3 文本3 文本3
</p>
</div>
</div>
英文:
I have 3 columns with content. On small screens, I want the columns to be displayed under each other. So far, so good.
On large screens, I want column 1 and column 2 to be displayed beside of each other, and column 3 to be displayed under column 1. It works, but if the content in column 2 is big, I get much space between column 1 and column 3. See attached screenshots.
How can I fix this, so that the column 3 is displayed directly under column 1 on large screens? Even if the content in column 2 is more / bigger that the content in column 1.
Large screens:
Small screens
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="row">
<div class="col-lg-6">
<p>Column 1</p>
<p>
Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1
</p>
</div>
<div class="col-lg-6">
<p>Column 2</p>
<p>
Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2
Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2
Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2
Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2
</p>
</div>
<div class="col-lg-6">
<p>Column 3</p>
<p>
Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3
</p>
</div>
</div>
<!-- end snippet -->
答案1
得分: 0
我找到了一个不错的解决方案，解决了不同列高度的问题。这是一个名为"Masonry"的插件。它通过根据可用的垂直空间将元素放置在最佳位置来工作。请查看 masonry.desandro.com。
英文:
I found a nice solution that fixed the varying column heights problem. It's a plugin called Masonry. It works by placing elements in optimal position based on available vertical space. See masonry.desandro.com.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论