我有两列:
<div class="col-md-6"></div>
<div class="col-md-6"></div>
我怎么在它们之间加一个空格?
输出只是两个相邻的列，占据了整个页面的宽度。假设宽度设置为1000px，那么每个div将是500px宽。
如果我想在两者之间有一个100px的空间，我如何用Bootstrap自动实现这一点:div的大小将变成450px来补偿间距。
当前回答
在冷-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>
其他回答
用css添加一个与背景颜色相同的边框怎么样?我是新手，所以也许有一个很好的理由不这样做，但当我尝试它时，它看起来很好。
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 >
简单的方法
.row div{
padding-left: 8px;
padding-right: 8px;
}
在最新的引导版本中，您可以使用“卡片”
这将是有用的。
.list-item { margin-right: -10 px; margin-top: 10 px; margin-bottom: 10 px; 边框:1px实体#eee; 填充:0 px; ｝ < div class = " col-md-4”> < div class = "列表项”> 你的名字< h2 > < / h2 > < / div > < / div > < div class = " col-md-4”> < div class = "列表项" > < / div > < / div >
如果想要增加或减少框的右边的边距，只需编辑列表项的右边距属性。
样例输出
