Html 我如何在引导程序中的 div 之间放置边距？

how do i put margin between div in bootstrap?

提问by patel

i just started to work on bootstrap css design, i want to put some 5px margin between box i created, and this margin should be Constant, if i re size browsers

我刚开始研究 bootstrap css 设计，我想在我创建的框之间放置一些 5px 的边距，如果我调整浏览器的大小，这个边距应该是常数

my html is like this :

我的 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>

so in above html i used div with background colors. and i want to put some margin between them.

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

回答by Jordan.J.D

The problem with your code in bootstrapis that columns (<div class="col-*"></div>) have custom padding. There will always be equal width between your divs, but not always equal height (unless you start adding bootstrap rows which is handled the same way vertically and columns are horizontally with padding).

引导程序中的代码的问题在于列 ( <div class="col-*"></div>) 具有自定义填充。div 之间的宽度总是相等，但高度并不总是相等（除非您开始添加引导行，这些行在垂直方向上以相同的方式处理，而列在水平方向上带有填充）。

To solve this problem in your case you just need to add padding to your divs. DEMO

要在您的情况下解决此问题，您只需要向 div 添加填充。演示

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

回答by Natacha

Following the cannonical way to add margin and padding in Bootstrap, you can do this.

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

Classes format:

班级形式：

• {property}{sides}-{size}for xs

• {property}{sides}-{breakpoint}-{size}for sm, md, lg, and xl.

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

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

Where propertyis one of:

其中property之一是：

• m - for classes that set margin
• p - for classes that set padding

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

Where sidesis one of:

其中sides之一是：

• t - for classes that set margin-top or padding-top
• b - for classes that set margin-bottom or padding-bottom
• l - for classes that set margin-left or padding-left
• r - for classes that set margin-right or padding-right
• x - for classes that set both *-left and *-right
• y - for classes that set both *-top and *-bottom
• blank - for classes that set a margin or padding on all 4 sides of the element

• 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 个边上设置边距或填充的类

Where sizeis one of:

其中size之一是：

• 0 - for classes that eliminate the margin or padding by setting it to 0
• 1 - (by default) for classes that set the margin or padding to $spacer * .25
• 2 - (by default) for classes that set the margin or padding to $spacer * .5
• 3 - (by default) for classes that set the margin or padding to $spacer
• 4 - (by default) for classes that set the margin or padding to $spacer * 1.5
• 5 - (by default) for classes that set the margin or padding to $spacer * 3

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

Examples

例子

1. Padding * 1.5 in all sides: <div class="p-4">
2. Margin default on top: <div class="mt-3">
3. Padding * 0.25 on left and right: <div class="px-1">

1. 各边填充 * 1.5： <div class="p-4">
2. 顶部保证金默认： <div class="mt-3">
3. 左右边距 * 0.25： <div class="px-1">

More info at their page, under Utilities > Spacing: https://getbootstrap.com/docs/4.0/utilities/spacing/

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

回答by GCallie

Why not using css with margin-bottom:5px;?

为什么不使用 cssmargin-bottom:5px;呢？

.col-xs-12{
    margin-bottom: 5px;  
}

<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>

回答by Giddswindle

I tried just putting some breaks in. Is this what you were looking for?

我试着休息一下。这就是你要找的吗？

<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>
    <br>
    <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>
    <br>
    <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>
    <br>
    <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>
  <br>
</div>