Bootstrap 3 - 在中型和大型设备上设置每行 3 列，在小型设备上设置两列的站点答案

【问题标题】：Bootstrap 3 - style a site with 3 columns per row on medium & large devices and two columns on smallBootstrap 3 - 在中型和大型设备上设置每行 3 列，在小型设备上设置两列的站点
【发布时间】：2013-11-24 22:31:13
【问题描述】：

我想在中型和大型设备上为每行包含 3 列信息的网站设置样式，在小型设备上只有两列，在移动设备上只有一列。

//这是我用的比较少的：

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

问题是我必须为不同的布局使用不同的标记。是否可以使用更少的资源来进行这种设计。我的感觉是它如果我把所有的#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>

...等

【问题讨论】：

我已经通过将所有内容添加到同一行并为我的 site_info_box 指定最小高度来解决这个问题。但是，如果某些内容将高度推到最小值以上，则会中断。

标签： less twitter-bootstrap-3

【解决方案1】：

要解决您的问题，您需要将所有列添加到同一行中。例如：

<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 ~~你的情况似乎不需要 clearfix~~ 当列的高度发生变化时，您将不得不使用#grid-responsive-resets：

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

【讨论】：

谢谢！对于任何尝试使用动态数量的“单元”div 来实现这一点的人，计算当前迭代 3 和 2 的模数将允许您在正确的位置输出 clearfix div。 =]

【解决方案2】：

感谢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 的（简化的）代码

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

【讨论】：