如何通过视口大小将 Bootstrap 行转换为列答案

【问题标题】：How to convert Bootstrap rows to columns by Viewport size如何通过视口大小将 Bootstrap 行转换为列
【发布时间】：2020-09-01 13:12:58
【问题描述】：

我在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 方式做到这一点？

【问题讨论】：

你为什么要走相反的路。正常情况是在较小的设备上将 cols 放入行
因为我是个白痴。感谢您指出了这一点。您可以将此添加为答案吗？
当然，我解释得更透彻了。希望对你有帮助

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

您可以将所有列放在 .row 中，并且由于引导网格是可组合的，因此每列可以同时包含 col-sm-4 和 col-lg-12 类。

网格结构为：

命名空间：col
屏幕尺寸：xs|sm|md|lg
colSpan：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 => @ 987654339@.

【讨论】：

【解决方案2】：

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

如果你还是要使用相反的方法，我建议你在你的 cols 中添加一个自定义类（因为使用默认的 col-x-x 不是一件好事，它可能会影响其余的您的布局），并使用 @media 查询添加一些样式来限制各种设备屏幕的列宽。

【讨论】：

【解决方案3】：

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

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

...那么这将实现您想要的。只需根据您希望列变为全宽的屏幕尺寸修改min-width 断点即可。 Here's a fiddle showing it at work.

【讨论】：

完全不需要。