我有两列:
<div class="col-md-6"></div>
<div class="col-md-6"></div>
我怎么在它们之间加一个空格?
输出只是两个相邻的列，占据了整个页面的宽度。假设宽度设置为1000px，那么每个div将是500px宽。
如果我想在两者之间有一个100px的空间，我如何用Bootstrap自动实现这一点:div的大小将变成450px来补偿间距。
当前回答
我必须弄清楚如何对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将宽度从30%更改为宽度:92.5%;在@media下(max-width:1023px)
其他回答
Bootstrap col稍微使用了一些左边和右边的空间。我刚刚添加了一个块元素，如div，并设置了边界的差异。此外，添加一些额外的填充或空白在额外的div将工作完美。
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/> < br > < br > < div class = "容器" > < div class = "行" > <div class="col-6 "> <div class="border - border-danger "> < h2 class = " text-center " > < / h2 > 1 < / div > < / div > < div class = " col-6”> <div class="border - border-warning"> < h2 class = " text-center " > < / h2 > 2 < / div > < / div > < / div > < / div >
您可以使用此处文档中的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
在最新的引导版本中，您可以使用“卡片”
我在列之间的空间方面也遇到过类似的问题。根本问题是自举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，就像“row”类引导程序使用的那样。这个div，我们称之为“raise -block”，必须是列的直接兄弟
这样，您仍然可以在列中获得适当的填充。我见过通过创建空间来工作的解决方案，但不幸的是，他们创建的列在行两侧有额外的填充，因此最终使行变得更薄，网格布局是为之设计的。如果你想要看到你想要的样子，这意味着两列加在一起会比上面的一列更小，这打破了网格的自然结构。
这种方法的主要缺点是它需要额外的标记来包装每列的内容。对我们来说，这是可行的，因为只有特定的列之间需要空间来实现所需的外观。
<div class="col-md-6">
<div class="inner">
<!-- Put the col-6 elements in the inner div -->
</div>
</div>
默认情况下，这在外部div中提供了一些填充，这是您需要的方式。此外，您还可以使用自定义CSS修改填充。
