Less Bootstrap 3-设计一个站点，在中型和大型设备上每行3列，在小型设备上每行2列

我想风格的中型和大型设备上每行3列的信息，只有两列的小型设备和移动设备上的一个网站

//这是我少用的：

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

问题是我必须为不同的布局使用不同的标记。 有没有可能用更少的钱来做这种设计。我的感觉是 如果我将所有站点信息框放入一个.site\u info\u box组，效果会更好 然后对每一个第n个div进行样式化，将其强制添加到一个新的行中-但我不知道如何进行 让它工作起来

我已经考虑过javascript解决方案，但我想了解使用纯less是否可以实现这一点

对于三列，我需要这个标记

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

---

。。。etc

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

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

另请参见：我认为您的案例似乎不需要clearfix 当柱的高度发生变化时，您必须使用：

多亏了。 这是我用来让这个解决方案为我工作的更少的原因：

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

---

通过将所有内容添加到同一行并为我的站点信息框指定最小高度，我已经解决了这个问题。但是，如果某些内容将高度推到最小值之外，则会中断。谢谢！请注意，任何试图使用动态数量的单元格div实现此功能的人，计算当前迭代的模数3和2将允许您在正确的位置输出clearfix 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>