我有两列:
<div class="col-md-6"></div>
<div class="col-md-6"></div>
我怎么在它们之间加一个空格?
输出只是两个相邻的列，占据了整个页面的宽度。假设宽度设置为1000px，那么每个div将是500px宽。
如果我想在两者之间有一个100px的空间，我如何用Bootstrap自动实现这一点:div的大小将变成450px来补偿间距。
当前回答
根据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">自定义列填充</div> < / div > <div class="col px-5"> <div class="p-3 border bg-light">自定义列填充</div> < / div > < / div >
其他回答
我知道这篇文章有点过时，但我遇到了同样的问题。我的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;
}
我希望这能帮助到其他人。
在冷-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>
由于您正在使用Bootstrap，列间距属性将有助于实现。W3Schools Column-Gap for Bootstrap有关于如何使用它的文档。
CSS:
.col-gap {
column-gap: 2rem;
}
对于HTML，将类(col-gap)放在行div中。 但也要注意，这可能会影响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>
用css添加一个与背景颜色相同的边框怎么样?我是新手，所以也许有一个很好的理由不这样做，但当我尝试它时，它看起来很好。
引导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;
