css - 如何在列之间添加间距？

Question

我有两列：

<div class="col-md-6"></div>
<div class="col-md-6"></div>

如何在它们之间添加空格？

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

如果我想在100px两者之间留一个空间，我如何使用 Bootstrap 自动实现这一点：divs 大小将变为450px每个大小以补偿间距。

score 365 · Accepted Answer

我面临同样的问题；以下对我来说效果很好。

<div class="row">
  <div class="col-md-6">
     <div class="col-md-12">
        Some Content.. 
     </div>
  </div>
  <div class="col-md-6">
     <div class="col-md-12">
        Some Second Content.. 
     </div>
  </div>
</div>

这将自动在 2 个 div 之间呈现一些空间。

在此处输入图像描述

score 181 · Accepted Answer

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

<div class="row">
  <div class="col-md-5"></div>
  <div class="col-md-5 col-md-offset-2"></div>
</div>

在 Bootstrap 4 中使用：offset-2或offset-md-2

score 79 · Accepted Answer

我知道我迟到了，但你可以尝试用填充物隔开盒子。

<div class="col-md-6 box">
        <div class="inner">Hello</div>
</div>
<div class="col-md-6 box">
        <div class="inner">Hello</div>
</div>

CSS：

.box {
    padding: 0 5px 0 5px;
}
.box .inner {
    background-color: #fff;
}

试一试

score 24 · Accepted Answer

您可以使用带有边框属性的背景剪辑和框模型

.box{
  box-sizing: border-box;
  border: 3px solid transparent;
  background-clip:padding-box;
}

<div class="row">
  <div class="col-xs-4 box"></div>
  <div class="col-xs-4 box"></div>
  <div class="col-xs-4 box"></div>
</div>

score 14 · Accepted Answer

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

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

这就是我们想要的最终结果

在列之间存在带有阴影的间隙是有问题的。我们不希望列之间有额外的空间。我们只是希望排水沟是“透明的”，这样网站的背景颜色就会出现在两个白色列之间。

这是两列的标记

<div class="row">
    <div class="col-sm-7">
        <div class="raised-block">
            <h3>Facebook</h3>
        </div>
    </div>
    <div class="col-sm-5">
        <div class="raised-block">
            <h3>Tweets</h3>
        </div>
    </div>
</div>

CSS

.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，就像引导程序使用的“行”类一样。而这个 div，我们称之为“raised-block”，必须是列的直接兄弟

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

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

score 13 · Accepted Answer

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

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row mx-n5">
  <div class="col px-5">
    <div class="p-3 border bg-light">Custom column padding</div>
  </div>
  <div class="col px-5">
    <div class="p-3 border bg-light">Custom column padding</div>
  </div>
</div>

score 11 · Accepted Answer

这将允许两列之间有一个空格，显然，如果您想更改默认宽度，您可以使用 mixins 来修改默认引导宽度。或者，您可以使用内联 CSS 样式指定宽度。

<div class="col-md-5 pull-left"></div>
<div class="col-md-5 pull-right"></div>

score 9 · Accepted Answer

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

<div class="container">
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
</div>

score 6 · Accepted Answer

由于您使用的是bootstrap，我想您想让事情响应。在这种情况下，您不应该使用固定大小，例如在“px”中。

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

当然，此解决方案也适用于调整“col-md-x”的两列以上

希望能帮助到你 ;）

score 4 · Accepted Answer

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

<div class="row">
  <div class="col-md-8">
     <div class="thumbnail">
       <img src="#"/>
     </div>
  </div>
  <div class="col-md-4">
     <div class="thumbnail">
       <img src="#"/>
     </div>
  </div>   
</div>

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

score 4 · Accepted Answer

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

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

score 2 · Accepted Answer

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

<div class="container">
    <div class="row bg-info p-3">

        <!-- left column -->
        <div class="col-8 ">
            <div class="col-12 bg-light p-3">
                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!
            </div>
        </div>

        <!-- right column -->
        <div class="col-4 ">
            <div class="col-12 bg-light p-3">
                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!
            </div>
        </div>
    </div>
</div>

score 2 · Accepted Answer

我必须弄清楚如何为 3 列执行此操作。我想绕过 div 的角落，但无法让间距起作用。我使用了边距。在我的例子中，我认为 90% 的屏幕由 div 填充，10% 用于边距：

html:

<div class="row">
  <div id="orange" class="col-md-4">
    <h1>Orange Div</h1>
  </div>
  <div id="green" class="col-md-4">
    <h1>Green Div</h1>
  </div>
  <div id="aqua" class="col-md-4">
    <h1>Aqua Div</h1>
  </div>
</div>

和 CSS：

#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 将宽度从 30% 更改为width:92.5%;下@media (max-width:1023px)

score 1 · Accepted Answer

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

<div class="col-md-6 form-group"></div>
<div class="col-md-6 form-group"></div>

score 1 · Accepted Answer

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

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

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

    <div class="row">
      <div class="col-md-6">
        <div class="col-md-12 padding-pls">
          Keci
        </div>
      </div>
      <div class="col-md-6">
        <div class="col-md-12 padding-pls">
          Keci
        </div>
      </div>
  </div>

score 1 · Accepted Answer

it's simple .. you have to add solid border right, left to col-* and it should be work ..:)

it looks like this : http://i.stack.imgur.com/CF5ZV.png

HTML :

<div class="row">
     <div class="col-sm-3" id="services_block">

     </div>
     <div class="col-sm-3" id="services_block">

     </div>
     <div class="col-sm-3" id="services_block">

     </div>
     <div class="col-sm-3" id="services_block">

     </div>
</div>

CSS :

div#services_block {
   height: 355px;
   background-color: #33363a;
   border-left:3px solid white;
   border-right:3px solid white;
}

score 1 · Accepted Answer

由于您使用的是 Bootstrap，因此column-gap属性将有助于实现。W3Schools Column-Gap for Bootstrap有关于如何使用它的文档。

CSS：

.col-gap {
  column-gap: 2rem;
}

对于 HTML，在行 div 中有类（col-gap）。但还要注意，这可能会导致 col-md-6 （或其他大小）的间距消失，以补偿减小每列的大小。（即 col-md-6 -> col-md-5，即使只有 2 列）

HTML：

    //Row
    <div class="row col-gap justify-content-center">
 
    //Col 1
        <div class="col-md-5 ms-3 card p-5">
            <p>Div 1</p>
        </div>

    //Col 2
        <div class="col-md-5 ms-3 card p-5">
            <p>Div 2</p>
        </div>          
    </div>

score 1 · Accepted Answer

Bootstrap col 在左右两边稍微使用了一些空格。我刚刚添加了一个像 div 这样的块元素并为差异设置了边框。此外，在该额外的 div 中添加一些额外的填充或边距将完美地工作..

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>

<br><br>

<div class="container">
    <div class="row">
        <div class="col-6 ">
            <div class="border border-danger ">
                <h2 class="text-center">1</h2>
            </div>
        </div>
        <div class="col-6">
            <div class="border border-warning">
                <h2 class="text-center">2</h2>
            </div>
        </div>
    </div>
</div>

score 1 · Accepted Answer

我需要移动设备上的一列和平板电脑纵向上的两列，中间的间距相等（列内也没有任何添加网格的填充）。可以使用间距实用程序并省略以下数字来实现col-md：

    <div class="container-fluid px-0">
        <div class="row no-gutters">
            <div class="col-sm-12 col-md mr-md-3" style="background-color: orange">
                <p><strong>Column 1</strong></p>
            </div>
            <div class="col-sm-12 col-md ml-md-3" style="background-color: orange">
                <p><strong>Column 1</strong></p>
            </div>
        </div>
    </div>

score 1 · Accepted Answer

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

<div class="row">
    <div class="col-xs-3">
        <div class="form-group">
            <label asp-for="FirstName" class="control-label"></label>
            <input asp-for="FirstName" class="form-control" />
            <span asp-validation-for="FirstName" class="text-danger"></span>
        </div>
    </div>
    <div class="col-xs-3">
        <div class="form-group">
            <label asp-for="LastName" class="control-label"></label>
            <input asp-for="LastName" class="form-control" />
            <span asp-validation-for="LastName" class="text-danger"></span>
        </div>
    </div>            
</div>

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

这就是我所做的......

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

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

score 1 · Accepted Answer

我不认为你可以单独使用 Bootstrap 来做到这一点。列之间的空间会自动添加/维护。如果您需要在列之间添加特定宽度，您可以使用此技巧来模拟空间：https ://jsfiddle.net/loginet/3rogbh9s/5/

<div class="row">
    <div class="col-6">
        <div class="left-column">Left column</div>
    </div>
    <div class="col-6">
        <div class="right-column">Right column</div>
    </div>
</div>

和 CSS

.left-column {
    padding: 10px;
    padding-right: 50px;
    background: white;
}

.right-column { 
    padding: 10px;
    padding-left: 50px; 
    background: white;  
}

score 0 · Accepted Answer

使用css添加与背景颜色相同的边框怎么样？我是新手，所以也许有充分的理由不这样做，但是当我尝试时它看起来不错。

score 0 · Accepted Answer

创建一个类并使用：

边距：1.5em .5em；最大宽度：计算（50% - 1em）！重要；

其中最大宽度上的 1em 等于加在一起的左右边距。

score 0 · Accepted Answer

<div class="row">

  <div class="col-sm-6">
    <div class="card">
        Content one
    </div>
  </div>

  <div class="col-sm-6">
    <div class="card">
        Content two
    </div>
  </div>

</div>

score 0 · Accepted Answer

在Bootstrap v5.0中，您可以使用 cssvariable 设置间隙：

.row {
  --bs-gutter-x: 100px; // column-gap
  --bs-gutter-y: 100px;  // row-gap
}

score 0 · Accepted Answer

0

简单的方法

.row div{
  padding-left: 8px;
  padding-right: 8px;
}

于 2018-07-10T03:02:49.637 回答

score 0 · Accepted Answer

<div class="col-md-6">
    <div class="inner">
        <!-- Put the col-6 elements in the inner div -->
    </div>
</div>

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

score 0 · Accepted Answer

    <div class="col-md-12 no_padding header_row"></div>



    <div class="second_row">
        <div class="col-md-4 box_shadow"></div>
        <div class="col-md-8 no_padding_right">
            <div class="col-md-12 box_shadow"></div>
        </div>
    </div>


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

score 0 · Accepted Answer

这将是有用的..

.list-item{
  margin-right:-10px;
   margin-top:10px;
    margin-bottom: 10px;
    border: 1px solid #eee;
    padding: 0px;
  }

<div class="col-md-4">
  <div class="list-item">
      <h2>Your name</h2> 
  </div>
</div>
<div class="col-md-4">
   <div class="list-item"></div>
</div>

如果使用想要增加或减少框右侧的进一步边距，则只需编辑列表项的 margin-right 属性。

样本输出

score 0 · Accepted Answer

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

@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;
}

<div class="container-fluid space-100-px">
  <div class="row">
    <div class="col-md-6">
      <img src="http://placehold.it/450x100?text=Left" alt="Left">
    </div>
    <div class="col-md-6">
      <img src="http://placehold.it/450x100?text=Right" alt="Right">
    </div>
  </div>
</div>

score 0 · Accepted Answer

引导程序 4

文档说（这里）：

行是列的包装器。每列都有水平填充（称为装订线），用于控制它们之间的空间。然后在具有负边距的行上抵消此填充。这样，列中的所有内容在视觉上都在左侧对齐。

所以正确的答案是：设置cols' padding-left/right 等于减去你row的 margin-left/right。就这么简单。

#my-row {
  margin-left: -80px;
  margin-right: -80px;
}

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

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

score -1 · Accepted Answer

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

<div class="container">
 <div class="row">
  <div class="col-md-6">
    <div class="bg-success">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <div class="col-md-6">
    <div class="bg-warning">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
    </div>
  </div>
</div>
</div>

score -2 · Accepted Answer

使用 margin-left 是要走的路：

<div style="margin-left:-2px" class="col-md-6"></div>
<div style="margin-left:2px" class="col-md-6"></div>

完美运行

score -5 · Accepted Answer

-5

使用最新的引导程序版本，您可以使用“卡片”

于 2020-04-01T16:14:27.373 回答

css - 如何在列之间添加间距？

34 回答 34

引导程序 4

Related

Reference