引导填充剩余的列

Question

是否有一个引导类可以填充许多尚未被占用的列？ 例如，我有这个可能存在的 div 标签，如果它不是我希望第二个 div 占用 12 列，则它可能不存在，但如果它存在则只占用 8 列。像这样

<div class="row">
   <?php if(something){ ?>
      <div class="col-md-4">
        <div> </div>
      </div>
   <?php } ?>
   <div class="col-md-fill">
     <div> </div>
   </div>
</div>

除了使用

<div class="col-md-<?php
     if($count > 5){
         echo "8";
      } else {
         echo '12';
      }
       ?>">

Answer 1

你在正确的轨道上。只需用 else 结束你的 if 语句。一种方式是使用 4 和 8，另一种方式是使用 12 并占据整行。

<div class="row">
   <?php if(something){ ?>
      <div class="col-md-4">
        <div> </div>
      </div>
      <div class="col-md-8">
        <div> </div>
      </div>
   <?php } else { ?>
   <div class="col-md-12">
     <div> </div>
   </div>
   <?php } ?>
</div>

Answer 2

我会这样做，以保持代码干燥

<div class="row">
<div class="<?php if($something){echo 'col-md-push-4 col-md-8'}else{echo 'col-md-12'}">
</div>
</div>

我现在注意到您可能想要输入一些内容if is in 4。在这种情况下，这可能没有用。如果您只想满足空间，这就是您的解决方案

Answer 3

有时我会尝试一些非常愚蠢的事情，但这次我的愚蠢让我感到惊讶......

我已经看到，如果我们在没有任何类的情况下附加到 div.row 和 div，这个无类 div 会填充自己的空白空间....

小提琴：http://jsfiddle.net/52VtD/8127/

HTML：

<div class="container">
<div class="row">
  <div class="col-md-4 bleu">bleu</div>
  <div class="rouge">rouge</div>  
</div>

<div class="row">
  <div class="col-md-1 bleu">bleu</div>
  <div class="rouge">rouge</div>  
</div>


<div class="row">
  <div class="col-md-9 bleu">bleu</div>
  <div class="rouge">rouge</div>  
</div>

</div>