如何在不包装的情况下在引导列之间添加余量

我的布局目前看起来像这样

在中间的列中，我想在每个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; } 

我怎样才能为DIV添加一个边距，使其不会在右侧留下太多空间？

Answer 1

您应该使用内部容器上的填充而不是边距。 尝试这个！

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

Answer 2

如果您不需要在列上添加边框，也可以在其上添加透明边框：

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

Answer 3

我面临同样的问题; 下面的工作对我很好。 希望这有助于在这里登陆的人：

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

这会自动在2个div之间渲染一些空间。

Answer 4

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

（约294行）。

 @grid-columns: 20; 

someName.html

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

Answer 5

这样做的简单方法是在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>