angularjs - Col 应该折叠并向左浮动

Question

我有以下设置(我知道它不是最好看的，但它适用于这种情况)。我有多个 col-md-4 标签。一旦左边的高度比其他的大，第二行的高度就在中间，但它应该在第一个带有 TestTT... 字符串的下面的左边。

https://www.bootply.com/HJbiqZXmkE

问题是我正在使用 AngularJS 并通过 ngFor 循环处理多个事物，所以我不能在第三个之后静态添加行标签，因为我不知道会显示多少。

Answer 1

当您在循环中迭代 div 时，它采用默认的 css。包含在 div 中是不均匀的，因此有 bootstrap self 调整，显示你最好的结果，这是有意的。您必须为您的 div 设置明确的高度，这可能会影响您的响应速度，您可能必须使用自定义 css 编写 @media 代码。因为你想在不使用行的情况下使用 4 个空间，你可以这样做

<div class="col-md-4 customCss">Content1</div>
<div class="col-md-4 customCss">Content2</div>
<div class="col-md-4 customCss">Content3</div>
<div class="col-md-4 customCss">Content4</div>

在 CSS 中

.customCss{
  min-height:50px;// you desirable properties 
}

已更新

我用过php做的，你可以用angular用你的语言实现

假设 $rows 是我的数组

  <?php $rows =  array(array('id'=>'a'), array('id'=>'b'),array('id'=>'c'), array('id'=>'d'),array('id'=>'e')); 
  $i=0; // counter 
  foreach ($rows as $row){  
  if ($i%3==0) { // if counter is multiple of 3 ?>
      <div class="row">
  <?php } ?>
       <div class="col-md-4">
         Content
       </div>        
  <?php $i++; ?>
  <?php if($i%3==0) { // if counter is multiple of 3 ?>
      </div>
    <?php } ?>
 <?php } ?>
 <?php if($i%3!=0) { // put closing div if loop is not exactly a multiple of 3 ?>
       </div>
  <?php  } ?>

如果你没有得到，请告诉我