php Bootstrap填充剩余列

bwntbbo3  于 2023-01-08  发布在  PHP
关注(0)|答案(4)|浏览(403)

有没有一个引导类,将填充许多列尚未采取?例如,我有这个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';
      }
       ?>">
l7wslrjt

l7wslrjt1#

  • 有时候我会做些愚蠢的事,但这次我的愚蠢让我吃惊 *

我已经看到,如果我们向div.row附加一个没有任何类的div这个没有类的div会填充自己的空间....

小提琴http://jsfiddle.net/bhgme789/1/
超文本标记语言

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

iezvtpos2#

你的思路是对的,用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>
anauzrmj

anauzrmj3#

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

<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的东西。在这种情况下,这可能没有用。如果你只是想满足空间,这是你的解决方案

bis0qfac

bis0qfac4#

当使用Bootstrap v4和v5时,您应该使用'equal-width'列类col

.col{
    flex: 1 0 0%;
}

当浏览器使用基于百分比的列样式以像素为单位计算时,由于舍入错误导致最后一列被推到下一行,我需要这个功能。因此,在某些情况下,我使用col-2的最后一列被向下推,使用col就解决了这个问题。
一个小提琴像前面给出的例子与蓝色和红色的细胞:http://jsfiddle.net/o14qh386/

相关问题