Question

我在lg和sm上有一个如下所示的布局：

我希望相同的div成为lg上的行和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

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

网格结构是：

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

所以，你可以混合使用它们：

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

＆＃13;

@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;
}

＆＃13;

<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>

＆＃13;

PS：从引导程序开始，如果DIV有一个visible-lg类，div只会以LG大小显示，那么，添加hidden-sm类不是必要：.box-a.row.visible-lg.hidden-sm =＆gt; .box-a.row.visible-lg。

Answer 2

所有前端框架（如 Bootstrap ）都使用网格系统来显示和定位内容。网格列工作（使用）的方式是在大屏幕上显示单行中的几个列，但随着屏幕缩小（表或移动设备），您在单行中显示较少（或仅一个）列。你问的是完全相反的。

如果你仍然需要使用相反的方法，我建议你为你的cols添加一个自定义类（因为使用默认的 col-xx 不是一件好事，它可能会影响其余的你的布局），并使用 @media queries 添加一些样式来约束各种设备屏幕的列宽。

Answer 3

最简单的方法是使用媒体查询在小列到达某个断点时使其全宽。如果向每个列添加一个名为full-width的类，然后向css添加媒体查询，例如：

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

然后这将实现你想要的。只需根据屏幕尺寸修改最小宽度断点即可使列成为全宽。这是一个在工作中表现出来的小提琴。 https://jsfiddle.net/a3tgetzj/

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

3 个答案: