如何通过查看端口大小将引导行转换为列

Question

我在lg和sm上有这样的布局

​

​

我希望相同的div在lg上是行，在sm上是cols。有没有办法做到这一点，而没有完全不同的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

您可以将所有列放入一个.row中，而且由于引导网格是可组合的，所以每个列都可以同时拥有col-sm-4和col-lg-12类。

网格结构是：

1. 命名空间：col
2. screenSize：xs|sm|md|lg
3. colSpan：1-12

所以，你可以把它们混合在一起：

• 当屏幕是LG (to UP)时，colspan是12：col-lg-12
• 当屏幕是SM (to UP)时，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:在引导过程中，如果一个DIV有一个类visible-lg，那么div只会在LG大小下显示，所以添加hidden-sm类是不必要的：.box-a.row.visible-lg.hidden-sm => .box-a.row.visible-lg。

Answer 2

所有前端框架，比如引导，都使用网格系统来显示和定位内容。网格列的工作方式(使用)是在大屏幕上，您在一行中显示了几个cols，但是随着屏幕缩小(表或移动设备)，在一行中显示的列更少(或只有一个)。你所要求的正好相反。

如果您仍然需要使用相反的方法，我建议您向您的cols中添加一个自定义类(因为使用默认的columns不是一件好事，它可能会影响您布局的其余部分)，并使用@media查询添加一些样式来限制各种设备屏幕的列的宽度。

Answer 3

最简单的方法是通过使用媒体查询使您的小列在到达某个断点时达到完全宽度。如果向每个列添加一个名为“完全宽度”的类，然后将媒体查询添加到css中，如：

@media (min-width:720px) {
    .full-width {
        width:100%;
        left:0;
    }
}

..。这样你就能得到你想要的。只需根据屏幕大小修改min-width断点，就可以使列变为完全宽度。这是一把小提琴，在工作中显示出来。