如何通过Viewport大小将引导行转换为列?

I have a layout that looks like this on lg and sm:

在lg和sm中，我有一个这样的布局:

I want the same divs to be rows on lg and cols on sm. Is there a way to do this without having completely different divs? The solution I came up with is:

我想要同样的div在sm上是lg和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

But this, like I said, involves redundant code. Is there a way to do this in a cleaner DRYer manner?

但是，就像我说的，这涉及到冗余代码。有没有办法用更清洁的烘干机?

3 个解决方案

#1

You can put all columns in a .row and, because bootstrap grid is composable, each column can have both col-sm-4 and col-lg-12 classes.

您可以将所有列都放在.row中，因为bootstrap网格是可组合的，每个列都可以有coll -sm-4和coll -lg-12类。

The grid structure is:

网格结构是:

namespace: col
名称空间:坳
screenSize: xs|sm|md|lg
拉:xs sm | | | lg
colSpan: 1-12
colSpan:1 - 12

So, you are able to have any mix of them:

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

When screen is LG (to UP) colspan is 12: col-lg-12
当屏幕为LG(向上)时，colspan为12:coll - LG -12。
When screen is SM (to UP) colspan is 4: col-sm-4
当屏幕为SM(向上)时，colspan为4:colsm -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: As of bootstrap works, if a DIV has a class visible-lg that div will be shown only at LG sizes, so, adding a hidden-sm class isn't necessary: .box-a.row.visible-lg.hidden-sm => .box-a.row.visible-lg.

PS:在bootstrap工作中，如果一个DIV有一个类visi- LG，那么DIV只会显示在LG大小，所以，添加一个hidden-sm类不是必需的:.box-a. row.visi- LG。hidden-sm = > .box-a.row.visible-lg。

#2

All front-end frameworks like Bootstrap use the grid system for displaying and positioning content. The grid columns work(is used) in a way that on large screens you show couple of cols in a single row, but as the screen shrinks (table or mobile device), you show fewer (or just one) column in a single row. What you are asking is the quite opposite.

所有前端框架(如Bootstrap)都使用网格系统来显示和定位内容。网格列的工作方式(被使用)在大屏幕上，您可以在单个行中显示几个cols，但是当屏幕缩小(表或移动设备)时，在单个行中显示的(或仅仅一个)列就更少了。你所问的恰恰相反。

If you still have to use the opposite approach, I suggest you to add a custom class to your cols (cause using the default col-x-x is not a good thing and it may affect the rest of your layout), and add some style using the @media queries to constraint the width of the columns for various device screens.

如果你仍然需要使用相反的方法,我建议你添加一个自定义类关口(导致使用默认col-x-x不是一件好事,它会影响你其他的布局),并添加一些样式使用@media查询约束列的宽度对各种设备的屏幕。

#3

The easiest way to do this is by making your small columns full width when they reach a certain break point by using media queries. If you add a class called full-width to each column and then add a media query to your css such as:

要做到这一点，最简单的方法是通过使用媒体查询使您的小列达到一定的断点。如果在每个列中添加一个名为full-width的类，然后在css中添加一个媒体查询，例如:

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

then this will achieve what you want. Just modify the min-width break point according to the screen size you'd like the columns to become full width at. Here's a fiddle showing it at work. https://jsfiddle.net/a3tgetzj/

这样你就能得到你想要的。只需根据屏幕大小修改最小宽度断点，您希望这些列的宽度可以达到最大宽度。这是一个在工作中展示它的小提琴。https://jsfiddle.net/a3tgetzj/

#1