如何使用 Bootstrap 3 实现这种桌面/移动布局？答案

【问题标题】：How to achieve this desktop/mobile layout with Bootstrap 3?如何使用 Bootstrap 3 实现这种桌面/移动布局？
【发布时间】：2015-12-18 20:13:08
【问题描述】：

我有一个我正在尝试实现的设计，但我一直坚持如何使用 Bootstrap 3 正确地完成它。我对 Bootstrap 的经验不是很丰富，而且我确信我错过了一些可以使概念到位。

在此配置中，三个带有背景图像的 DIV 可以在桌面上看到：

但要在此配置下在移动设备上看到：

我不确定如何进行这项工作——我可以通过两个不同的 #3 div 来实现，一个隐藏的，一个分别显示在桌面/移动设备中，但这似乎不对。我可以通过添加自己的 @media 规则来做到这一点，但这似乎也违背了 Bootstrap 的观点。

【问题讨论】：

标签： twitter-bootstrap css twitter-bootstrap-3 responsive-design

【解决方案1】：

这非常简单，您可以使用引导程序中已有的网格系统来完成。

.blue {
  background: blue;
}
.green {
  background: green;
}
.red {
  background: red;
}

.row-500 {
  width: 500px;
  margin: 0 auto;
}

@media screen and (max-width: 500px) {
  .row-500 {
    width: 250px;
  }
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<div class="row-500">
  <div class="col-md-6 blue">250px</div>
  <div class="col-md-6 green">250px</div>
</div>
<div class="row-500">
  <div class="col-md-12 red">500px unless under 500px then its 250px</div>
</div>

CodePen

如果您需要它们特别是 250 像素宽，那么您可以添加额外的类来指定它以及将容器设置为仅特定宽度。

阅读更多关于Bootstrap Grids here

【讨论】：

对不起，我可能应该更清楚。我确实需要它们是特定的宽度。您是说通过向容器添加特定宽度来做到这一点？
谢谢。所以在这种情况下没有办法添加我自己的媒体规则，因为我需要特定的宽度？这是有道理的，这是覆盖引导程序默认值的最小情况。
谢谢。我想我在想 Bootstrap 应该为我做所有事情，但这并没有真正的意义。

【解决方案2】：

试试这个Fiddle,

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6">1<br/>250</div>
        <div class="col-md-6">2<br/>250</div>        
    </div>
    <div class="row">
        <div class="col-md-12">3<br/>250</div>
    </div>
</div>

【讨论】：

【解决方案3】：

对于这种情况，您可以在每种情况下指定 div 的呈现形式：

<div class="row">    
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
       1 - 250
    </div>
   <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
       2 - 250
    </div>
   <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
       3 - 500
    </div>
</div>

引导网格的系统很简单，请按照文档进行查询：

http://getbootstrap.com/css/#grid

【讨论】：

不需要col-xs-12 col-md-6 col-lg-6或col-xs-12 col-md-12 col-lg-12