twitter-bootstrap - 如何使用 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

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

阅读更多关于 Bootstrap Grids here 的信息