html - 如何在 bootstrap 中的 div 之间放置边距？

Question

我想在我创建的框之间留出一些 5px 的边距，如果我调整浏览器窗口的大小，这个边距应该保持不变。

我的html是这样的:

<div class="container">
        <div class="row">
            <div class="col-md-3  col-sm-6 col-xs-12">
                <div style="height: 121px; background-color: orange; width:100%;">
                    <label>Box 1</label>
                </div>
            </div>
            <div class="col-md-2 col-sm-6 col-xs-12">
                <div style="height: 121px;background-color: wheat; width:100%;">
                    <label>Box 2</label>
                </div>
            </div>
            <div class="col-md-2 col-sm-6 col-xs-12">
                <div style="height: 121px;background-color: beige ;width:100%;">
                    <label>Box 3</label>
                </div>
            </div>
            <div class="col-md-2 col-sm-6 col-xs-12">
                <div style="height: 121px;background-color: chocolate; width:100%;">
                    <label>Box 4</label>
                </div>
            </div>
        </div>
                </div>

所以在上面的 html 中，我使用了带有背景色的 div。我想在它们之间留一些边距。

Answer 1

按照在 Bootstrap 中添加边距和填充的规范方法，您可以执行此操作。

类(class)格式:

• {property}{sides}-{size}对于 xs

• {property}{sides}-{breakpoint}-{size}对于 sm、md、lg 和 xl。

在哪里property是其中之一:

• m - 用于设置边距的类
• p - 用于设置填充的类

在哪里sides是其中之一:

• t - 用于设置 margin-top 或 padding-top 的类
• b - 用于设置 margin-bottom 或 padding-bottom 的类
• l - 用于设置 margin-left 或 padding-left 的类
• r - 用于设置 margin-right 或 padding-right 的类
• x - 用于同时设置 *-left 和 *-right 的类
• y - 用于同时设置 *-top 和 *-bottom 的类
• 空白 - 用于在元素的所有 4 个边上设置边距或填充的类

在哪里size是其中之一:

• 0 - 对于通过将其设置为 0 来消除边距或填充的类
• 1 -(默认情况下)对于将边距或填充设置为 $spacer * .25 的类
• 2 -(默认情况下)对于将边距或填充设置为 $spacer * .5 的类
• 3 -(默认情况下)对于将边距或填充设置为 $spacer 的类
• 4 -(默认情况下)对于将边距或填充设置为 $spacer * 1.5 的类
• 5 -(默认情况下)对于将边距或填充设置为 $spacer * 3 的类

示例

1. 所有边的填充 * 1.5:<div class="p-4">
2. 顶部边距默认值:<div class="mt-3">
3. 左右边距 * 0.25:<div class="px-1">

更多信息在他们的页面，在 Utilities > Spacing 下:https://getbootstrap.com/docs/4.0/utilities/spacing/