logo标签列表

如何在Bootstrap中给div之间添加边距？

htmlcsstwitter-bootstrap
13

我想在我创建的盒子之间加入一些5像素的边距，并且这个边距应该是恒定的，如果我调整浏览器窗口大小。

我的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。我想在它们之间放一些边距。

你是指当顶部和底部的 div 被缩小时，它们之间没有填充吗？ - Jordan.J.D
嗨，我想让边距在调整浏览器大小时保持一致。比如说，如果您在盒子之间放置了5像素的边距，则在我调整大小时应该保持不变。 - patel
padding-* 应该可以解决问题。http://www.w3schools.com/css/css_padding.asp。添加 padding 并删除自定义高度。 - Jordan.J.D
我知道，但填充在这里不起作用 :( - patel
已添加了一个答案以帮助你。 - Jordan.J.D
4个回答
9
按照 Bootstrap 的标准方式添加边距和填充，您可以这样做。
类的格式如下：
- 对于 xs，使用 {property}{sides}-{size}。 - 对于 sm、md、lg 和 xl，使用 {property}{sides}-{breakpoint}-{size}。
其中，property 如下：
- m - 用于设置 margin 的类 - p - 用于设置 padding 的类 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 个边上设置 margin 或 padding 的类 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/
7
你在bootstrap中的代码问题在于列（<div class="col-*"></div>）具有自定义填充。您的div之间始终会有相等的宽度，但不一定有相等的高度（除非您开始添加与垂直行同样处理水平列的bootstrap行，并带有填充）。
在您的情况下解决此问题只需向您的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>
为什么不使用padding-right？第一个盒子的宽度比其他盒子大 :( - patel
我已经为您修复了，第一个div使用的是col-md-3而其他的是col-md-2。至于为什么不使用右侧填充，那是因为它涉及到宽度，而Bootstrap的CSS会处理这个问题。我还删除了width:100%，因为这是不必要的。 - Jordan.J.D
为什么在HTML代码中混合样式，当你可以使用Bootstrap解决方案来做到这一点呢？ - Natacha
@Natacha，这篇文章已经6年了。如果需要更新，请随意进行！ - Jordan.J.D
2
为什么不使用带有 margin-bottom:5px; 的 css？ 

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

3
因为那不是引导程序。 - toddmo
0

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>

你是在寻找类似边框的东西吗？ - Giddswindle
寻找类似于http://jsfiddle.net/A4qB2/2/的东西吗？抱歉我没有导入bootstrap，但是如果您在父元素中添加填充，它将像子元素的边距一样工作，并在使用border-box + 100％宽度时为您提供颜色之间的空间。 - Evan
什么是最佳解决方案，我认为我的问题非常简单 :( - patel
抱歉，我不太明白你在寻找什么。 - Giddswindle
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接