引导面板对齐并在全页视图

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> 

但每个面板

上面的例子之间的间隙只有样品。我打算使用循环来生成面板，并在页面上显示新闻内容可能会超过100个面板。

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

Answer 1

Bootstrap的设计目的并非如此。如果你注意到它将推动下一个组合元素，其宽度= 12 col从最高元素向下。

所以在你的示例图像中有4个col-md-3，它等于12.最右边的元素的内容最多，因此下一个元素可能是col-md-12或col-md-3将被推低到那个元素。

它很难，没有任何的jQuery或Javascript帮助建立一个砖石布局..

编辑 -

一种解决方案是可能的，而不使用jQuery或JavaScript。通过使用Flexbox，您可以创建“石工”风格布局。

看看这篇文章，解释更多关于Flexbox石工布局。

Answer 2

，我认为它会帮助你在引导套住，

<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 } }?> 

我让它在一排

Answer 3

CSS上阅读了4列“显示：弯曲”属性。你应该能够使用它将所有的窗格对齐到相同的尺寸。

这是最好的解释在这里：

http://clearleft.com/thinks/270

基本上，在CSS显示设置家长楼盘设计：弯曲并设置柔性扭曲特性来包装

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