Question

我想在一个网站上设置每行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解决方案，但我想了解是否可以使用pure 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>

...等

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

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

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

2 个答案: