Question

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

https://www.bootply.com/HJbiqZXmkE

问题是我使用AngularJS并通过多种方式循环使用ngFor，因此我无法在第三个之后静态添加行标记，因为我不知道将显示多少行。

Answer 1

当你在循环中迭代div时，它采用默认的css。 div中的包含是不均匀的，由于这有自举调整自己，显示你最好的结果，这是有意的。你必须为你的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来实现，你可以使用角度

中的语言来实现

假设$ 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  } ?>

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

Col应该倒塌并向左浮动

1 个答案: