Bootstrap 填充剩余的列

Question

是否有一個引導程序 class 可以填充但是許多列尚未被占用？ 例如，我有這個可能存在的 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.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>

Answer 3

我會這樣做，以保持代碼干燥

<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 4

使用 Bootstrap v4 和 v5 時，您應該使用“等寬”列 class col ：

.col{
    flex: 1 0 0%;
}

我需要這個用於邊緣情況，當瀏覽器使用基於百分比的列 styles 計算像素時，由於舍入錯誤導致最后一列被推到下一行。因此在某些情況下，我的最后一列與col-2被推下，只使用col解決了它。

像前面給出的帶有藍色和紅色單元格的示例的小提琴： http://jsfiddle.net/o14qh386/