Html 如何在不换行的情况下在引导列之间添加边距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19010845/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I add a margin between bootstrap columns without wrapping
提问by Andy
My layout currently looks like this
我的布局目前看起来像这样
In the center column, I want to add a small margin between each ServerDiv. But, if I add a margin to the CSS, it ends up line wrapping and looking like this
在中间列中，我想在每个ServerDiv之间添加一个小的边距。但是，如果我向 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>
And the CSS
和 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;
}
I attempted to add the margins by doing this
我试图通过这样做来添加边距
.info-panel > div {
margin: 4px;
}
How can I add a margin to the DIVs so that they don't leave so much space on the right hand side?
如何为 DIV 添加边距，以便它们不会在右侧留下太多空间？
回答by Charles Ingalls
You should work with padding on the inner container rather than with margin. Try this!
您应该在内部容器上使用填充而不是边距。尝试这个！
HTML
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
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;
}
回答by krishna kinnera
I was facing the same issue; and the following worked well for me. Hope this helps someone landing here:
我面临同样的问题；以下对我来说效果很好。希望这有助于有人登陆这里：
<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>
This will automatically render some space between the 2 divs.
这将自动渲染 2 个 div 之间的一些空间。
回答by Seb33300
If you do not need to add a border on columns, you can also simply add a transparent border on them:
如果您不需要在列上添加边框，您也可以简单地在它们上添加透明边框：
[class*="col-"] {
background-clip: padding-box;
border: 10px solid transparent;
}
回答by Shaun Luttin
Change the number of @grid-columns. Then use -offset. Changing the number of columns will allow you to control the amount of space between columns. E.g.
更改 的数量@grid-columns。然后使用-offset. 更改列数将允许您控制列之间的空间量。例如
variables.less (approx line 294).
variables.less（大约第 294 行）。
@grid-columns: 20;
someName.html
某个名称.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>
回答by Ricardo Flores
The simple way to do this is doing a div within a div
这样做的简单方法是在 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>