3个项目彼此相邻但在移动3行

Question

我使用此代码显示了3个项目

<div class="col-md-12">
    <i class="icon_set_1_icon-29"></i>Private/Group&nbsp;
    <i class="icon_set_1_icon-83"></i>8 hours&nbsp;
    <i class="icon_set_1_icon-52"></i>Morning Half Day
</div>

有了这个，我无法在手机上获得3个不同的行。

我尝试使用引导系统

<div class="col-md-12">
    <div class="col-sm-4"><i class="icon_set_1_icon-29"></i>Private/Group</div>
    <div class="col-sm-4"><i class="icon_set_1_icon-83"></i>8 hours</div>
    <div class="col-sm-4"><i class="icon_set_1_icon-52"></i>Morning Half Day</div>
</div>

移动设备的结果还可以，但普通视图不是我想要的。

bootstrap col系统的结果是这样的

我希望在普通浏览器上拥有此视图  在移动设备上这个视图

我如何用bootstrap做到这一点？

Answer 1

您需要添加css来清除桌面断点中的列

少：

@screen-md:                  992px;
@screen-md-min:              @screen-md;

@media (min-width: @screen-md-min) { 
    .col-md-clear{
        width: auto;
    }
}

HTML：

<div class="row">
    <div class="col-md-4 col-md-clear"><i class="icon_set_1_icon-29"></i>Private/Group</div>
    <div class="col-sm-4 col-md-clear"><i class="icon_set_1_icon-83"></i>8 hours</div>
    <div class="col-sm-4 col-md-clear"><i class="icon_set_1_icon-52"></i>Morning Half Day</div>
</div>