如何增加列之间的间距?

我有两列:

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

我怎么在它们之间加一个空格?

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

如果我想在两者之间有一个100px空间，我如何用Bootstrap自动实现这一点:__abc1的大小将变成450px每个来补偿间隔。

574321 次浏览
小开
最佳答案

你可以使用col-md-offset-*类，文档在这里。间距是一致的，这样所有的列都能正确对齐。为了获得均匀的间距和列大小，我将执行以下操作:

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

在引导4中使用:offset-2或offset-md-2

小开

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

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

我知道我来晚了，但你可以试着用填充物把盒子隔开。

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

试一试

小开

使用bootstrap的.form-group类。你的情况是这样的:

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

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

小开

我也面临着同样的问题;下面的方法对我很有效。

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

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

enter image description here

小开

你可以使用colx -xs-*类来实现列与列之间的间隔，在下面编码的colx -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>
小开

很简单..你必须添加固体边界右，左col-* 它应该是工作..:)

它看起来像这样: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;
}
小开

我在列之间的空间方面也遇到过类似的问题。根本问题是自举3和4中的列使用填充而不是边距。所以相邻两列的背景色彼此接触。

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

这是我们想要的最终结果

enter image description here

列与列之间的阴影是有问题的。我们不希望列与列之间有额外的空间。我们只是想让排水沟是“透明的”，这样场地的背景色就会出现在两根白色柱子之间。

这是这两列的标记

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

这样，您仍然可以在列中获得适当的填充。我见过通过创建空间来工作的解决方案，但不幸的是，他们创建的列在行两侧有额外的填充，因此最终使行变得更薄，网格布局是为之设计的。如果你想要看到你想要的样子，这意味着两列加在一起会比上面的一列更小，这打破了网格的自然结构。

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

小开

我必须弄清楚如何对3列做这个。我想绕过divs的角落，但无法获得空间的工作。我用了边距。在我的例子中，我认为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在@media (max-width:1023px)下将宽度从30%更改为width:92.5%;

小开

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

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

小开

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

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

这将是有用的。

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

如果想要增加或减少框的右边的边距，只需编辑列表项的右边距属性。

样例输出

enter image description here

小开

在冷-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>
小开

环绕元素的白色边框

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

引导4文件自定义。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;

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

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

小开

这也是一种方法。请检查以下url 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>
小开

既然你在使用引导，我猜你想让这个东西响应。在这种情况下，你不应该使用固定的大小，例如'px'。

作为其他解决方案的变通方案，我建议将两列都设为“col-md-5”而不是“col-md-6”，然后在包含列的父元素“row”中添加类“justice -content-between”，这将把空闲空间放在中间，正如你可以在引导文档在这里中检查的那样

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

希望能有所帮助;)

小开

简单的方法

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

我知道这篇文章有点过时，但我遇到了同样的问题。我的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>

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

我是这么做的……

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

我希望这能帮助到其他人。

小开

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

col with custom spacing

小开

我需要在移动设备上有一列，在平板电脑肖像上有两列，中间有相等的间距(也没有在列内添加任何网格填充)。可以使用空格实用程序并省略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>
小开

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

小开

enter image description here

引导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>
小开

使用左边距是正确的方法:

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

完美的作品

小开

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

小开

创建一个类并使用:

margin: 1.5em .5em; Max-width: calc(50% - 1em)!important;

其中max-width上的1em等于左右边距的总和。

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

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>

小开

因为你正在使用Bootstrap，所以纵队间隔属性将很有用。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>
小开

在引导v5.0中，你可以用cssvariable设置gap:

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

我不认为你能做到这与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;
}
小开

bootstrap 5提供了一种使用g-*类添加cols间隙的更舒适的方法

<div class="container">
<div class="row g-2">
<div class="col-6">...</div>
<div class="col-6">...</div>
</div>
</div>

example

文档:https://getbootstrap.com/docs/5.0/layout/gutters/


提交答案