我正在使用Bootstrap，需要重现此布局：
基本上有一个div容器（section-container），其中包含一些灰色的框（box-container）。
布局，你可以在图像中看到，应该是响应，它必须在移动的，平板电脑和桌面上工作。
框的高度取决于其内容，框的宽度取决于section-container的宽度。
我尝试使用row和col，并在窗口尺寸较小时增加“列宽”。
它不能很好地工作，我想我需要添加一个小于sm的新断点，因为有时候框的宽度会变得太小（框的宽度应该总是〉= 350px）。除此之外，我如何设置框之间的水平和垂直间距？我尝试了：
.box-container {
...
margin-left: 10px;
margin-right: 10px;
}但它并不像我预期的那样工作。
下面是一个工作示例。
第一次
多谢了
1条答案
按热度按时间0md85ypi1#
使用Bootstrap时，最小断点不是指定断点，例如
col-12。这里我使用了
col-12 col-md-6 col-lg-4，因此列将占用row宽度的（12/12）= 100%、（6/12）= 50%和（4/12）= 33，33%。这里我将内容换行是因为如果添加左右边距，它将换行该行的最后一个元素（因为它将占用其他元素超过100%的宽度）。您可以更改Bootstrap的默认值以避免换行元素，但这是最快的方法。
第一个
编辑
下面是一个没有环绕元素的示例：
第一次
相关：Bootstrap Breakpoints