如何添加引导列之间的边距而不包装

我的布局现在是这样的

Current Layout

在中间一列，我想添加每个 Server分区之间的一个小边距。但是，如果我向 CSS 添加一个页边距，它最终会被换行，看起来就像这样

Attempted Change

<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;
}

我怎样才能给 DIV 添加一个边距，这样它们就不会在右边留下太多的空间了？

320174 次浏览
小开
最佳答案

您应该在内部容器上使用填充，而不是使用边距！

超文本标示语言

<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;
}
小开

更改 @grid-columns的编号。然后使用 -offset。更改列数将允许您控制列之间的空间量。例如。

Variable.less (大约第294行)。

@grid-columns:              20;

翻译

<div class="row">
<div class="col-md-4 col-md-offset-1">First column</div>
<div class="col-md-13 col-md-offset-1">Second column</div>
</div>
小开

如果不需要在列上添加边框，也可以简单地在列上添加透明边框:

[class*="col-"] {
background-clip: padding-box;
border: 10px solid transparent;
}
小开

我当时也面临着同样的问题，以下几点对我来说很有效。希望这能帮助某些人在这里着陆:

<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 之间的一些空间。 enter image description here

小开

这样做的简单方法是在 div 中执行 div

<div class="col-sm-4" style="padding: 5px;border:2px solid red;">
<div class="server-action-menu" id="server_1">Server 1
</div>
</div>
<div class="col-sm-4" style="padding: 5px;border:2px solid red;">
<div class="server-action-menu" id="server_1">Server 2
</div>
</div>
<div class="col-sm-4" style="padding: 5px;border:2px solid red;">
<div class="server-action-menu" id="server_1">Server 3
</div>
</div>


提交答案