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

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:响应列重置文档部分 我的情况您似乎不需要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>