如何在引导程序中将div放在div之间？

Question

我刚刚开始研究bootstrap css设计，我想在我创建的框之间放置一些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中代码的问题在于列（<div class="col-*"></div>）具有自定义填充。 div之间总是有相等的宽度，但并不总是相等的高度（除非你开始添加自举行，这些行的垂直方向相同，而列是水平的填充）。

要解决此问题，您只需要在div中添加填充。 DEMO

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

Answer 2

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

课程格式：

• {property}{sides}-{size}适用于xs

对于sm，md，lg和xl，

• {property}{sides}-{breakpoint}-{size}。

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＆gt;下;间距：https://getbootstrap.com/docs/4.0/utilities/spacing/

Answer 3

为什么不将css与margin-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>

Answer 4

我试过放一些休息时间。这就是你要找的东西吗？

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