我正在尝试使用 bootstrap 将设计师的设计转换为 html/css,但我正在努力让它发挥作用。每个方 block 都是不同的图像,但现在我一直在玩带边框的 div。
当在移动设备上时,每张图片都应该在一个单独的列中 - 所以看起来它们应该是 col-xs-12
。
知道我应该如何使用 bootstrap 复制它吗?
最佳答案
您将很难使用 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>
关于html - 在 Bootstrap 中创建布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31127424/