引导填充剩余的列

Posted 2023-03-06

【中文标题】引导填充剩余的列

【英文标题】：Bootstrap fill remaining columns

【发布时间】：2014-11-10 13:09:45

【问题描述】：

是否有一个引导类可以填充许多尚未被占用的列？ 例如，我有这个可能存在的 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';
      
       ?>">

【问题讨论】：

你想要动态吗？我的意思是is col-sm-4 改变了吗？

【参考方案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>

【参考方案2】：

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

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

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

【参考方案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>

【讨论】：

@Sébastien 它正在工作（我认为）看看this