如何使用Bootstrap 3实现此桌面/移动布局？

Question

我有一个设计我试图实现，而且我坚持如何使用Bootstrap 3正确地完成它。我对Bootstrap不是很有经验而且我确定我错过了一些可以使概念落实到位的东西。

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

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

我不确定如何使这项工作 - 我可以通过分别拥有两个不同的＃3 div，一个隐藏，一个分别显示在桌面/移动设备中来实现，但这看起来并不合适。我可以通过添加我自己的@media规则来实现这一点，但这似乎与Bootstrap相反。

Answer 1

这非常简单，你可以使用已经在bootstrap中的网格系统来完成它。

.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

如果您需要它们专门为250px宽，那么您可以添加其他类来指定它，以及将容器设置为仅特定宽度。

详细了解Bootstrap Grids here

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

Answer 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