html - 在 Bootstrap 中创建布局

Question

我正在尝试使用 bootstrap 将设计师的设计转换为 html/css，但我正在努力让它发挥作用。每个方 block 都是不同的图像，但现在我一直在玩带边框的 div。

当在移动设备上时，每张图片都应该在一个单独的列中 - 所以看起来它们应该是 col-xs-12。

知道我应该如何使用 bootstrap 复制它吗？

Answer 1

您将很难使用 bootstrap 复制这种布局 - bootstrap 网格以基于行的原则工作，这意味着您的列可以很好地水平排列在一起，但不是垂直排列 - 新元素将始终清除其上方的较大元素会留下空白(我附上了一个 BS 问题的例子)。

你最好使用像 Masonry 这样的东西或 Flex实现这样的布局。

.one {
  background: yellow;
}
.two {
  background: red;
  height: 100px;
}
.three {
  background: blue;
  height: 50px;
}
.four {
  background: orange;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class "row">
    <div class="col-sm-6 one">There is a gap under me above 768px width because div elements three and four will always clear the largest height of elements above.</div>
    <div class="col-sm-6 two">two</div>
    <div class="col-sm-6 three">three</div>
    <div class="col-sm-6 four">four</div>
  </div>
</div>