关于html：如何在Bootstrap中增加列之间的间距？


How do I add spacing between columns in Bootstrap?

我敢肯定有一个解决此问题的简单方法。 基本上，如果我有两列，如何在它们之间添加一个空格？

例如 如果html是：

1
 

输出将只是彼此相邻的两列，占据页面的整个宽度。 假设宽度设置为1000px，则每个div的宽度为500px。

如果我想在两者之间留一个100px空格，我怎么能做到这一点？ 显然，通过引导程序自动使div大小变为450px，以补偿空间

我面临着同样的问题；以下对我来说效果很好。希望这可以帮助某人登陆：

1
2
3
4
5
6
        Some Content..
     
 
 
     
        Some Second Content..

这将自动在2个div之间渲染一些空间。

enter image description here

相关讨论

您可以使用col-md-offset-*类实现列之间的间距，在此处记录。间距是一致的，因此所有列均正确排列。为了获得均匀的间距和列大小，我将执行以下操作：

1
 
相关讨论

我知道我参加聚会迟到了，但是您可以尝试用填充物将盒子隔开。

1
2
3
4
        Hello


        Hello

CSS：

1
2
3
4
5
6
.box {
    padding: 0 5px 0 5px;
}
.box .inner {
    background-color: #fff;
}

去吧

相关讨论

我在列之间的空间也有类似的问题。根本问题是引导程序3和4中的列使用填充而不是空白。因此，两个相邻列的背景色彼此接触。

我找到了一个适合我们问题的解决方案，并且该解决方案最适合大多数试图分隔列并保持与网格系统其余部分相同的装订线宽度的人。

这是我们想要的最终结果

enter image description here

在列之间存在带有阴影的间隙是有问题的。我们不希望列之间有多余的空间。我们只是希望装订线是"透明的"，因此站点的背景色将出现在两个白色列之间。

这是两列的标记

1
2
3
4
5
6
            Facebook
       
   
   
       
            Tweets

的CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.raised-block {
    background-color: #fff;
    margin-bottom: 10px;
    margin-left: 0;
    margin-right: -0.625rem; // for us 0.625rem == 10px
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}
@media (max-width: 33.9em){ // this is for our mobile layout where columns stack
    .raised-block {
        margin-left: -0.625rem;
    }
}
.row [class^="col-"]:first-child>.raised-block {
    // this is so the first column has no margin so it will not be"indented"
    margin-left: -0.625rem;
}

这种方法的确需要内部div带有负边距，就像" row"类引导程序使用的那样。这个div(我们称为"凸起块")必须是列的直接同级

这样，您仍然可以在列内获得适当的填充。我已经看到解决方案似乎可以通过创建空间来工作，但是不幸的是，它们创建的列在行的两侧都有额外的填充，因此最终使行变得更薄，这是网格布局设计所针对的。如果以所需的外观查看图像，则这意味着两列在一起的大小将小于顶部的一列，这会破坏网格的自然结构。

这种方法的主要缺点是，它需要额外的标记来包装每列的内容。对于我们来说，这是可行的，因为只有特定的列之间需要空间才能实现所需的外观。

您可以使用带有背景边框的background-clip和box-model

1
2
3
4
5
.box{
  box-model: border-box;
  border: 3px solid transparent;
  background-clip:padding-box;
}
1
 

这将在两列之间留出空间，并且显然，如果您想更改默认宽度，可以使用mixins来修改默认的引导程序宽度。或者，您可以使用内联CSS样式指定宽度。

1
 
相关讨论

您可以使用col-xs- *类在以下编码的col-xs- * div中实现列之间的间距。间距是一致的，因此所有列均正确排列。为了获得均匀的间距和列大小，我将执行以下操作：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
            Some Content..
       
   
   
       
            Some Second Content..
       
   
   
       
            Some Second Content..
       
   
   
       
            Some Second Content..
       
   
   
       
            Some Second Content..
       
   
   
       
            Some Second Content..
       
   
   
       
            Some Second Content..
       
   
   
       
            Some Second Content..

使用引导程序的.form-group类。在您的情况下是这样的：

1
 
相关讨论

在col-md-？内，创建另一个div并将图片放在该div中，这样您就可以轻松地添加填充。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
       <img src="#"/>
     
 
 
     
       <img src="#"/>
     
     


<style>
  thumbnail{
     padding:4px;
           }
</style>

Bootstrap 4，文件custom.scss，您可以添加以下代码：

1
2
3
4
5
6
7
8
$grid-gutter-width-base: 20px;

$grid-gutter-widths: ( xs: $grid-gutter-width-base,
sm: $grid-gutter-width-base,
md: $grid-gutter-width-base,
lg: $grid-gutter-width-base,
xl: $grid-gutter-width-base
);

默认情况下$ grid-gutter-width-base：30px;

相关讨论

我必须弄清楚如何针对3列进行此操作。我想绕过div的角落，无法获得足够的间距。我用边距。在我的情况下，我认为div会填充90％的屏幕，而边距则为10％：

的HTML：

1
2
3
4
5
6
7
    Orange Div
 
 
    Green Div
 
 
    Aqua Div

和CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#orange {
    background-color:orange;
    border-radius: 30px;
    padding: 20px;
    margin: 2.5% 2.5% 0 2.5%;
    width:30%;
}
#green {
    background-color:green;
    border-radius: 30px;
    padding: 20px;
    margin: 2.5% 0 0 0;
    width:30%;
}
#aqua {
    background-color:#39F;
    border-radius: 30px;
    padding: 20px;
    margin: 2.5% 2.5% 0 2.5%;
    width: 30%;
}

为了正确调整其大小以适合移动设备，我让CSS在@media (max-width:1023px)下将宽度从30％更改为width:92.5%;

由于您使用的是自举程序，因此我想您想使该程序具有响应性。在这种情况下，您不应使用固定大小，例如" px"。

作为其他解决方案的解决方法，我建议将两个列都设为" col-md-5"而不是" col-md-6"，然后在包含这些列的父元素" row"中添加类" justify-content" -between"，它将可用空间放在中间，因为您可以在此处签入引导文档

当然，此解决方案对于调整" col-md-x"的两列以上也是有效的

希望能帮助到你 ;)

我知道这篇文章过时了，但是我遇到了同样的问题。我的HTML示例。

1
2
3
4
5
6
7
8
9
10
            <label asp-for="FirstName" class="control-label"></label>
            <input asp-for="FirstName" class="form-control" />
            <span asp-validation-for="FirstName" class="text-danger"></span>
       
   
   
       
            <label asp-for="LastName" class="control-label"></label>
            <input asp-for="LastName" class="form-control" />
            <span asp-validation-for="LastName" class="text-danger"></span>

为了在组之间创建空间，我通过将负边距减小5来覆盖site.css文件中引导区的-15px边距。

这是我做的...

1
2
3
.form-group {
    margin-right: -10px;
}

我希望这对其他人有帮助。

我在移动设备上需要一列，在平板电脑肖像上需要两列，中间要等间距(各列之间也不要添加网格填充)。可以使用间距实用程序并省略col-md中的数字来实现：

1
2
3
4
5
6
7
8
                <p>
Column 1
</p>
           
           
                <p>
Column 1
</p>

根据Bootstrap 4文档，您应该给父级一个负边距mx-n*，给子级一个正填充px-*

1
2
3
4
5
6
7
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

 
    Custom column padding
 
 
    Custom column padding

enter image description here

Bootstrap 4-使用嵌套行分隔列。

1
2
3
4
5
6
7
8
9
10
11
        <!-- left column -->
       
           
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro error enim, perferendis rerum, sit laudantium alias esse quas quae mollitia illum suscipit veritatis distinctio facere officia ullam repellendus accusamus odio!
           
       

        <!-- right column -->
       
           
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro error enim, perferendis rerum, sit laudantium alias esse quas quae mollitia illum suscipit veritatis distinctio facere officia ullam repellendus accusamus odio!
相关讨论

1
        <!-- Put the col-6 elements in the inner div -->

默认情况下，这会以您似乎需要的方式在外部div内提供一些填充。此外，您还可以使用自定义CSS修改填充。

为了获得列之间的特定间距宽度，我们必须在标准Bootstrap布局中设置padding。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

/* Check breakpoint at http://getbootstrap.com/css/#grid-media-queries */
@media (min-width: 992px) {
  .space-100-px > .row > .col-md-6:first-child {
    padding: 0 50px 0 0; /* The first half of 100px */
  }
  .space-100-px > .row > .col-md-6:last-child {
    padding: 0 0 0 50px; /* The second half of 100px */
  }
}

/* The result will be easier to see. */
.space-100-px img {
  width: 100%;
  height: auto;
}
1
2
3
4
      <img src="http://placehold.it/450x100?text=Left" alt="Left">
   
   
      <img src="http://placehold.it/450x100?text=Right" alt="Right">

包装元素周围只有白色边框

1
2
3
4
5
6
7
8
9
10
.padding-pls{
  border-left: 13px solid white;
  border-right: 13px solid white;
}
.row .col-md-6:first-child>.padding-pls {
  border-left: 0px solid white;
}
.row .col-md-6:last-child>.padding-pls {
  border-right: 0px solid white;
}

第一个和最后一个孩子没有边界

1
2
3
4
5
6
          Keci
       
     
     
       
          Keci

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
    body{
    background:#F0F0F0;
}

.main_holder{
    min-height: 600px;
    margin-top: 40px;
    height: 600px;
}
.box_shadow{
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
    background: white;
    height: auto;
    min-height: 500px;
}

.no_padding{
    padding: 0px !important;
}

.no_padding_right{
    padding-right: 0px !important;
}

.header_row{
    height: 60px;
    background: #00796B;
    -webkit-box-shadow: 0px 0px 9px 1px rgba(143,140,143,1);
    -moz-box-shadow: 0px 0px 9px 1px rgba(143,140,143,1);
    box-shadow: 0px 0px 9px 1px rgba(143,140,143,1);
}

.second_row{
    position: relative;
    width: 100% !important;
    top: 20px;
}
相关讨论

这将是有用的。

1
2
3
4
5
6
7
.list-item{
  margin-right:-10px;
   margin-top:10px;
    margin-bottom: 10px;
    border: 1px solid #eee;
    padding: 0px;
  }
1
      Your name

如果要在框的右侧增加或减少边距，则只需编辑list-item的margin-right属性。

样本输出

enter image description here

简单方法

1
2
3
4
.row div{
  padding-left: 8px;
  padding-right: 8px;
}

仅使用CSS添加与背景颜色相同的边框怎么样？我对此并不陌生，所以也许有充分的理由不这样做，但是当我尝试时看起来不错。

相关讨论

引导程序4

文档说(在这里)：

Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.

因此正确的答案是：将col的padding-left / right等于减去您的row的margin-left / right。这么简单。

1
2
3
4
5
6
7
8
9
#my-row {
  margin-left: -80px;
  margin-right: -80px;
}

#my-col {
  padding-left: 80px;
  padding-right: 80px;
}

演示：https：//codepen.io/frouo/pen/OqGaWN

col with custom spacing

很简单..您必须在右边添加实心边框，在col- *左边添加
它应该是工作.. :)

它看起来像这样：http://i.stack.imgur.com/CF5ZV.png

HTML：

1
 

CSS：

1
2
3
4
5
6
div#services_block {
   height: 355px;
   background-color: #33363a;
   border-left:3px solid white;
   border-right:3px solid white;
}
相关讨论

这也是它及其工作的一种方式。请检查以下网址https://jsfiddle.net/sarfarazk/ofgqm0sh/

1
2
3
4
5
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
   
 
 
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.