我有两列：
<div class="col-md-6"></div>
<div class="col-md-6"></div>
如何在它们之间添加空格？
输出将只是两列并排占据整个页面的宽度。假设宽度设置为 1000px 那么每个 div 将是 500px 宽。
如果我想在两者之间有一个100px 空间，我如何使用 Bootstrap 自动实现这一点：divs 大小将变为 450px 每个以补偿间距。
【问题讨论】：
您可以使用col-md-offset-* classes, documented here 实现列之间的间距。间距是一致的，以便所有列都正确排列。为了获得均匀的间距和列大小，我会执行以下操作：
<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
【讨论】：
这将允许两列之间的空间，显然如果你想改变默认宽度，你可以去 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;
}
试一试
【讨论】：
row-eq-height
使用引导程序的 .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>
这将自动在 2 个 div 之间呈现一些空间。
【讨论】：
col-xs-12 添加第二个div 与使用width:100%; padding:0px 15x; 添加一个div 相同
您可以在下面编码的 col-xs-* div 中使用 col-xs-* 类实现列之间的间距。间距是一致的，以便所有列都正确排列。为了获得均匀的间距和列大小，我会执行以下操作：
<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 中的列使用填充而不是边距。所以相邻两列的背景颜色会相互接触。
我找到了一个适合我们问题的解决方案，并且很可能适用于大多数尝试分隔列并保持与网格系统其余部分相同的装订线宽度的人。
这就是我们想要的最终结果
在列之间存在带有阴影的间隙是有问题的。我们不希望列之间有额外的空间。我们只是希望排水沟是“透明的”，这样网站的背景颜色就会出现在两个白色列之间。
这是两列的标记
<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”，必须是列的直接兄弟
这样，您仍然可以在列内获得适当的填充。我已经看到似乎通过创建空间来工作的解决方案，但不幸的是，他们创建的列在行的任一侧都有额外的填充，因此它最终使行更薄，网格布局设计用于。如果您查看图像以获得所需的外观，这意味着两列加在一起将小于顶部较大的那一列，这会破坏网格的自然结构。
这种方法的主要缺点是它需要额外的标记来包装每列的内容。对我们来说，这是可行的，因为只有特定的列需要它们之间的空间来实现所需的外观。
【讨论】：
我必须弄清楚如何为 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 在 @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>如果用户想进一步增加或减少框右侧的边距，则只需编辑列表项的 margin-right 属性。
样本输出
【讨论】：
在 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>
【讨论】：
环绕元素周围只有白色边框
.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;
}
【讨论】：
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;
【讨论】：
<div class="col-md-6">
<div class="inner">
<!-- Put the col-6 elements in the inner div -->
</div>
</div>
默认情况下，这会按照您似乎需要的方式在外部 div 内提供一些填充。此外，您还可以使用自定义 CSS 修改填充。
【讨论】：
这也是一种实现方式及其工作方式。请查看以下网址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>
【讨论】：
由于您使用的是 bootstrap，我猜您想让它响应式。在这种情况下，您不应该使用固定尺寸，例如“px”。
作为其他解决方案的解决方法，我建议将两个列都设为“col-md-5”而不是“col-md-6”，然后在包含这些列的父元素“行”中添加“类” justify-content-between"，将可用空间放在中间，您可以查看引导文档 here
此解决方案当然也适用于调整“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>
为了在组之间创建空间，我通过将负边距减少 5 来覆盖我的 site.css 文件中引导程序的 -15px 边距。
这就是我所做的......
.form-group {
margin-right: -10px;
}
我希望这对其他人有帮助。
【讨论】：
文档说 (here)：
行是列的包装。每列都有水平填充（称为装订线），用于控制它们之间的空间。然后在具有负边距的行上抵消此填充。这样一来，列中的所有内容在视觉上都在左侧对齐。
所以正确的答案是：设置cols' padding-left/right 等于减去你的row's margin-left/right。就这么简单。
#my-row {
margin-left: -80px;
margin-right: -80px;
}
#my-col {
padding-left: 80px;
padding-right: 80px;
}
【讨论】：
我需要移动设备上的一列和平板电脑纵向上的两列，中间的间距相等（列内也没有任何添加网格的填充）。可以使用间距实用程序并省略 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 documentation 你应该给父母一个负边距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>【讨论】：
<div class="row mt-n4"> 和<div class="col-3 pt-4">。
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>
【讨论】：
使用 margin-left 是要走的路：
<div style="margin-left:-2px" class="col-md-6"></div>
<div style="margin-left:2px" class="col-md-6"></div>
完美运行
【讨论】：
使用最新的引导版本，您可以使用“卡片”
【讨论】：
创建一个类并使用：
保证金：1.5em .5em； 最大宽度: calc(50% - 1em)!important;
其中最大宽度上的 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>
【讨论】：