避免 bootstrap 中的大间距？

Question

我有一个使用数据库 table 自动填充的 bootstrap 页面。我的问题是，使用我当前使用的代码，它最终看起来像这样： Current Look

有什么方法可以让我自动移动所有内容，使其看起来像这样吗？ Proposed Look

当前代码：

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="block block-transparent">
                <div class="content tasks">
                    <div class="task-item priority-<%=importancecolor%> float">
                        <div class="task-item-content">
                            <div class="task-item-head"><%=rs("Summary")%></div>
                            <div class="task-item-subhead"><%=rs("detail")%></div>
                            <div class="task-item-date"><i class="icon-calendar"></i>&nbsp;<%=rs("targetcompletiondate")%>&nbsp;&nbsp;&nbsp;<i class="icon-user"></i>&nbsp;<%=rs("assignedto")%></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

首先你需要知道 bootstrap 使用网格，这就是为什么有列和行的原因。如果你想实现你想要的，我建议使用你自己的自定义 css。 div 会根据内容的长度展开。我的 css 和 html 想要以下：

 <!DOCTYPE html>
 <html>
 <head>
     <title>Masonry</title>
 <style>
 .col-1{background: #2ecc71;width: 30%;float: left;}
 .col-2{background: #34495e;width: 30%;float: left;}
 .col-3{background: #2980b9;width: 30%;float: left;}
 .col-4{background: #c0392b;width: 30%;float: left;}
 .col-5{background: #7f8c8d;width: 30%;float: left;}
 </style>
 </head>
 <body>

 <div class="wrap">
     <div class="col-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia optio nihil rerum et deserunt tempore quidem, voluptate voluptates mollitia doloremque, excepturi cum dolore veniam dolorem? Error magnam, molestiae non rem!</div>
     <div class="col-2"> voluptate voluptates mollitia doloremque, excepturi cum dolore veniam dolorem? Error magnam, molestiae non rem!</div>
     <div class="col-3">id itaque corrupti?</div>
     <div class="col-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam fugiat consequuntur molestias quisquam nemo enim perferendis praesentium magnam, perspiciatis, itaque labore nesciunt accusantium assumenda quas incidunt aut animi veritatis cum.</div>
     <div class="col-5"> voluptate voluptates mollitia doloremque, excepturi cum dolore veniam dolorem? Error magnam, molestiae non rem!</div>
 </div>

 </body>
 </html>

Answer 2

如果我没理解错的话，你想要网格的砖石风格，就像 Pinterest 那样。

您可以使用 flexbox 实现它（检查 https://medium.com/@_jh3y/how-to-pure-css-masonry-layouts-a8ede07ba31a) or, if you prefer to keep using the Bootstrap grid, try JavaScript (https://masonry.desandro.com/），虽然我强烈建议您不应该使用 JavaScript 来做您可以在 CSS 中做的事情（如果您不'有浏览器兼容性问题）。

避免 bootstrap 中的大间距？

Avoid big spacing in bootstrap?

html

layout

task

col