如何在引导列之间添加边距而不换行
如何在引导列之间添加边距而不换行
提问于 2013-09-26 00:52:34
我的布局目前看起来像这样
在中间的列中，我想在每个Server Div之间添加一个小边距。但是，如果我在CSS中添加一个页边距，它将以换行结束，如下所示
<div class="row info-panel">
<div class="col-md-4 server-action-menu" id="server_1">
<div>
Server 1
</div>
</div>
<div class="col-md-4 server-action-menu" id="server_2">
<div>
Server 2
</div>
</div>
<div class="col-md-4 server-action-menu" id="server_3">
<div>
Server 3
</div>
</div>
<div class="col-md-4 server-action-menu" id="server_4">
<div>
Server 4
</div>
</div>
<div class="col-md-4 server-action-menu" id="server_5">
<div>
Server 5
</div>
</div>
<div class="col-md-4 server-action-menu" id="server_6">
<div>
Server 6
</div>
</div>
<div class="col-md-4 server-action-menu" id="server_7">
<div>
Server 7
</div>
</div>
</div>和CSS
.server-action-menu {
background-color: transparent;
background-image: linear-gradient(to bottom, rgba(30, 87, 153, 0.2) 0%, rgba(125, 185, 232, 0) 100%);
background-repeat: repeat;
border-radius:10px;
}
.info-panel {
padding: 4px;
}我试图通过这样做来增加页边距
.info-panel > div {
margin: 4px;
}我怎样才能给DIVs添加一个空白处，这样它们就不会在右边留下太多的空间了？
回答 4
Stack Overflow用户
回答已采纳
发布于 2013-09-26 01:00:40
您应该在内部容器上使用填充，而不是使用边距。尝尝这个!
HTML
<div class="row info-panel">
<div class="col-md-4" id="server_1">
<div class="server-action-menu">
Server 1
</div>
</div>
</div>CSS
.server-action-menu {
background-color: transparent;
background-image: linear-gradient(to bottom, rgba(30, 87, 153, 0.2) 0%, rgba(125, 185, 232, 0) 100%);
background-repeat: repeat;
border-radius:10px;
padding: 5px;
}Stack Overflow用户
发布于 2016-05-27 21:18:23
我也面临着同样的问题；下面的方法对我很有效。希望这能帮助一些人在这里登陆：
<div class="row">
<div class="col-md-6">
<div class="col-md-12">
Set room heater temperature
</div>
</div>
<div class="col-md-6">
<div class="col-md-12">
Set room heater temperature
</div>
</div>
</div>这将自动渲染两个div之间的一些空间。
Stack Overflow用户
发布于 2014-10-16 21:24:40
如果不需要在列上添加边框，也可以简单地在列上添加透明边框：
[class*="col-"] {
background-clip: padding-box;
border: 10px solid transparent;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19010845
复制相关文章
相似问题