小编Mar*_*Fee的帖子

我想在中型和大型设备上为每行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"> ... …