Question

我有以下HTML

 <div class="container-fluid">
    <div class="row">

        <div class="col-md-3">
            <div class="panel panel-default">
          <div class="panel-heading">Panel heading without title</div>
          <div class="panel-body">
            Panel content
          </div>

        </div>
        </div>

      <div class="col-md-3">      
            <div class="panel panel-default">
              <div class="panel-heading">Panel heading without title</div>
              <div class="panel-body">
                Panel content
              </div>
            </div>
      </div>

      <div class="col-md-3">      
            <div class="panel panel-default">
              <div class="panel-heading">Panel heading without title</div>
              <div class="panel-body">
                Panel content Panel contentPanel contentPanel contentPanel contentPanel contentPanel contentPanel contentPanel contentPanel contentPanel contentPanel content
              </div>
            </div>
      </div>

      <div class="col-md-3">      
            <div class="panel panel-default">
              <div class="panel-heading">Panel heading without title</div>
              <div class="panel-body">
                Panel content
              </div>
            </div>
      </div>          

      <div class="col-md-3">      
            <div class="panel panel-default">
              <div class="panel-heading">Panel heading without title</div>
              <div class="panel-body">
                Panel content
              </div>
            </div>
      </div>

      <div class="col-md-3">      
            <div class="panel panel-default">
              <div class="panel-heading">Panel heading without title</div>
              <div class="panel-body">
                Test Test   Test Test   Test Test   Test Test   Test Test   Test Test   Test Test   Test Test   Test Test   Test Test   Test Test   Test Test   Test Test   Test Test   Test Test   Test Test   Test Test   Test Test   Test Test   Test Test   Test Test   Test Test   Test Test   Test Test   Test Test   Test Test   Test Test 
              </div>
            </div>
      </div>          
      <div class="col-md-3">      
            <div class="panel panel-default">
              <div class="panel-heading">Panel heading without title</div>
              <div class="panel-body">
                Panel content
              </div>
            </div>
      </div>          
      <div class="col-md-3">      
            <div class="panel panel-default">
              <div class="panel-heading">Panel heading without title</div>
              <div class="panel-body">
                Panel content
              </div>
            </div>
      </div>          
      <div class="col-md-3">      
            <div class="panel panel-default">
              <div class="panel-heading">Panel heading without title</div>
              <div class="panel-body">
                Panel content
              </div>
            </div>
      </div>          
    </div>
 </body>
 </div>

但每个小组之间存在差距

panel gaps

以上示例仅为示例。我计划使用一个循环来生成面板，并在页面上显示新闻内容可以在页面上超过100个面板。

我的问题是如何消除上述差距？

Answer 1

Bootstrap并非旨在实现这一目标。如果你注意到它将推动下一个宽度= 12 col的组合元素超过最高元素。

因此，在您的示例图像中，您有4个col-md-3＆＃39; s等于12.最右边的元素具有最多的内容，因此下一个元素可能是col-md-12或col- md-3将被推低到那个元素。

很难建立一个没有任何jQuery或Javascript帮助的砌体布局。

编辑 -

无需使用jQuery或javascript即可实现解决方案。通过使用Flexbox，您可以创建一个＆＃39;砌体＆＃39;风格布局。

请看一下这篇文章，它解释了Flexbox砌体布局的更多信息。

Answer 2

我认为它会帮助你在bootstrap中循环面板，

<div class="container">
<div class="row">
<?php
for ($i=1; $i <100 ; $i++) { ?>
    <div class="col-md-3">      
            <div class="panel panel-default">
              <div class="panel-heading">Panel heading without title</div>
              <div class="panel-body">
                Panel content Panel contentPanel contentPanel contentPanel contentPanel contentPanel contentPanel contentPanel contentPanel contentPanel contentPanel content
              </div>
            </div>
      </div>
<?php 
$no++;
$x= $no % 3;
if ($x=='0') { ?></div><div class="row" style="">
<?php } }?>

我在一行中创建了4列

Answer 3

阅读css＆＃34; display：flex＆＃34;属性。您应该能够使用它将所有窗格对齐到相同的大小。

最好在这里解释一下：

http://clearleft.com/thinks/270

基本上，在css中设置parent属性样式以显示：flex并设置flex-warp属性以换行

然后将面板的高度设置为100％，以便它占据整个容器的高度。请参阅上面的链接，了解如何更改面板内的内容以处理flex。

Bootstrap面板在整个页面视图中对齐和组织

3 个答案: