如何按视口大小将 Bootstrap 行转换为列

Question

我的布局看起来像lg这样sm：

我希望相同的 div 成为 rowslg和 cols sm。有没有办法在不使用完全不同的 div 的情况下做到这一点？我想出的解决方案是：

.box-a.row.visible-lg.hidden-sm
.box-b.row.visible-lg.hidden-sm
.box-c.row.visible-lg.hidden-sm

.box-a.col-sm-4.visible-sm.hidden-lg
.box-b.col-sm-4.visible-sm.hidden-lg
.box-c.col-sm-4.visible-sm.hidden-lg

但正如我所说，这涉及冗余代码。有没有办法以更清洁的 DRYer 方式做到这一点？

Answer 1

您可以将所有列放在.rowand 中，因为引导网格是可组合的，所以每列可以同时具有col-sm-4和col-lg-12类。

网格结构为：

1. 命名空间：col
2. 屏幕尺寸：xs|sm|md|lg
3. 列跨度：1-12

因此，您可以将它们任意组合：

• 当屏幕LG（向上）时 colspan 为12：col-lg-12
• 当屏幕SM（向上）时 colspan 为4：col-sm-4

@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css";


.box {
  height: 50px;
  background: lightcoral;
  border: 1px solid green;
  margin: 5px 0;
}

<section class="container">
  <div class="row">
    
    
    <div class="col-sm-4 col-lg-12">
      <div class="box"></div>
    </div>
    
    <div class="col-sm-4 col-lg-12">
      <div class="box"></div>
    </div>
    
    <div class="col-sm-4 col-lg-12">
      <div class="box"></div>
    </div>

  </div>
</section>

PS：从 bootstrap 开始工作，如果 DIV 有一个类visible-lg，则 div 将仅按LG尺寸显示，因此hidden-sm不需要添加类：.box-a.row.visible-lg.hidden-sm=> .box-a.row.visible-lg。