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

Question

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

我的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中的问题是columns(<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

• {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">

在其页面上的实用程序>间距下的更多信息：https : //getbootstrap.com/docs/4.0/utilities/spacing/

Answer 3

我尝试插入一些中断。这是您要找的吗？

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