Bootstrap 3式一個網站在中型和大型設備上每列有3列，在小型設備上有兩列

我想在一箇中型&大型設備上設置每行3列信息的網站，只有兩個小型設備和一個在手機上。Bootstrap 3式一個網站在中型和大型設備上每列有3列，在小型設備上有兩列

//這是不太我用：

.site_info_box_group { 
    .make-row(); 
    .site_info_box { 
     .make-sm-column(6); 
     .make-md-column(4); 
}

的問題是我必須用不同標記對不同的佈局。是否有可能使用less來做這種設計。我的感覺是，如果我將所有＃site_info_box放入一個.site_info_box_group ，然後將每第n個div強制設置爲一個新行 - 但我不確定如何可以使其工作。

我已經考慮過一個JavaScript解決方案，但我想了解這是否可能使用純少。

對於三列我需要這個標記

<div class="site_info_box_group"> 
    <div class="site_info_box"> ... some markup here... </div> 
    <div class="site_info_box"> ... some markup here... </div> 
    <div class="site_info_box"> ... some markup here... </div> 
<div> 

<div class="site_info_box_group"> 
    <div class="site_info_box"> ... some markup here... </div> 
    <div class="site_info_box"> ... some markup here... </div> 
    <div class="site_info_box"> ... some markup here... </div> 
<div>

...等

但兩列我需要這個標記：

<div class="site_info_box_group"> 
    <div class="site_info_box"> ... some markup here... </div> 
    <div class="site_info_box"> ... some markup here... </div> 
<div> 

<div class="site_info_box_group"> 
    <div class="site_info_box"> ... some markup here... </div> 
    <div class="site_info_box"> ... some markup here... </div> 
<div> 

<div class="site_info_box_group"> 
    <div class="site_info_box"> ... some markup here... </div> 
    <div class="site_info_box"> ... some markup here... </div> 
<div>

...等

來源

2013-11-24 Mark Fee

我只要解決了這個問題的div（簡化）代碼通過添加一切到同一行，並給我的site_info_box一個最小高度。然而，如果某些內容將高度推到最低以上，就會中斷。 –

要解決您的問題，您需要將所有列添加到同一行中。例如：

<div class="container"> 
    <div class="row"> 
     <div class="col-md-4 col-sm-6">1</div> 
     <div class="col-md-4 col-sm-6">2</div> 

     <div class="col-md-4 col-sm-6">3</div> 
     <div class="col-md-4 col-sm-6">4</div> 

     <div class="col-md-4 col-sm-6">5</div> 
     <div class="col-md-4 col-sm-6">6</div> 

     <div class="col-md-4 col-sm-6">7</div> 
     <div class="col-md-4 col-sm-6">8</div> 
    </div> 
</div>

參見：Bootstrap 3.0:responsive column resets section of the documentation ~~我你的情況，似乎當你列的高度而變化，你將不得不使用 #grid-responsive-resets到不需要clearfix~~ ：

<div class="container"> 
    <div class="row"> 
     <div class="col-md-4 col-sm-6">1</div> 
     <div class="col-md-4 col-sm-6" style="height:50px;">2</div> 

     <div class="clearfix visible-sm"></div> 

     <div class="col-md-4 col-sm-6">3</div> 
     <div class="clearfix visible-md visible-lg"></div> 

     <div class="col-md-4 col-sm-6">4</div> 

     <div class="clearfix visible-sm"></div> 

     <div class="col-md-4 col-sm-6">5</div> 
     <div class="col-md-4 col-sm-6">6</div> 

     <div class="clearfix visible-sm visible-md visible-lg"></div> 

     <div class="col-md-4 col-sm-6">7</div> 
     <div class="col-md-4 col-sm-6">8</div> 
    </div> 
</div>

來源

2013-11-24 11:56:06

謝謝！任何人試圖用動態數量的「單元格」div來實現這一點，計算當前迭代3和2的模數將允許您在正確的位置輸出clearfix div。 =] – Relequestual

感謝https://stackoverflow.com/users/1596547/bass-jobsen。這是不太我曾經讓我這個解決方案的工作：

.site_info_box_group { 
    .make-row(); 
    .site_info_box { 
     .make-sm-column(6); 
     .make-md-column(4); 
    } 
    .colsplit2{ 
     .clearfix; 
     .visible-sm; 
    } 
    .colsplit3{ 
     .clearfix; 
     .visible-md; 
     .visible-lg; 
    } 
}

，這是我用來繪製

<div class = "site_info_box_group"> 
<?php 
    function draw_div($content){ 
     static $count=0; 
     print "<div class='site_info_box'>{$content}</div>"; 

     $class =""; 
     if (0 == (($count+1) % 2)) { 
      $class .= " colsplit2 "; 
     }; 

     if (0 == (($count+1) % 3)){ 
      $class .= " colsplit3 "; 
     }; 

     if (!empty($class)){ 
      print "<div class='{$class}'></div>"; 
     } 
     $count++; 
    } 
    foreach ($mycontent as $content){ 
     draw_div($content); 
    } 
?> 
</div>

來源

2013-11-24 13:24:07

Bootstrap 3式一個網站在中型和大型設備上每列有3列，在小型設備上有兩列

回答

相關問題