twitter-bootstrap 如何在 Bootstrap 网格中的列表项之间添加间隙？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34749174/
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 to add gap between list items in Bootstrap grid?
提问by Krang
I'm trying to make a two tiered horizontal list in bootstrap. It's like a secondary nav that will sit below the page header (so it won't be wrapped in nav tags).
我正在尝试在引导程序中制作一个两层的水平列表。它就像位于页面标题下方的辅助导航（因此它不会被包含在导航标签中）。
I'm trying to do it using a list, but am having trouble with the spacing. Since it needs to be 4 items wide (4 on top, 4 on bottom) I'm making each list-item into a col-md-3 (because 12/4 = 3).
我正在尝试使用列表来执行此操作，但在间距方面遇到了问题。因为它需要有 4 个项目宽（顶部 4 个，底部 4 个），所以我将每个列表项变成了 col-md-3（因为 12/4 = 3）。
So far, I can get them to line-up horizontally but I can't figure out a way to get any separation between them without pushing the 4th item down to the next level. I've been using margin to get some space between them, but like I said, that only breaks it.
到目前为止，我可以让它们水平排列，但我想不出一种方法可以在不将第 4 个项目向下推的情况下将它们分开。我一直在使用边距在它们之间留出一些空间，但就像我说的那样，这只会破坏它。
Here's the code...
这是代码...
.secondary-nav-container {
ul.list-group:after {
clear: both;
display: block;
content: "";
}
.list-group-item {
float: left;
border-left: 0 none;
border-right: 0 none;
border-bottom: 0 none;
margin: 0px;
padding: 10px 0px;
}
a {
//nothing here yet
}
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<div class="secondary-nav-container container">
<div class="row">
<ul class="list-group">
<li class="col-xs-3 list-group-item"><a href="#">One</a></li>
<li class="col-xs-3 list-group-item"><a href="#">One</a></li>
<li class="col-xs-3 list-group-item"><a href="#">One</a></li>
<li class="col-xs-3 list-group-item"><a href="#">One</a></li>
<li class="col-xs-3 list-group-item"><a href="#">One</a></li>
<li class="col-xs-3 list-group-item"><a href="#">One</a></li>
<li class="col-xs-3 list-group-item"><a href="#">One</a></li>
<li class="col-xs-3 list-group-item"><a href="#">One</a></li>
</ul>
</div>
</div>The goal is to have two rows with 4 list-items in each that takes up the full width of the row, and stacks on top of each other. With spacing between each list-item so it doesn't look like there is just one giant horizontal line across the top of each row — there needs to be space between each list-items horizontal line at the top.
目标是有两行，每行有 4 个列表项，占据行的整个宽度，并相互堆叠。每个列表项之间有间距，因此看起来每行顶部不会只有一条巨大的水平线——顶部的每个列表项水平线之间需要有空间。
回答by isherwood
It's best to not mix grid elements and style elements. Since your list requires it, you'll need to move some styles to the anchors rather than the list items:
最好不要混合使用网格元素和样式元素。由于您的列表需要它，您需要将一些样式移动到锚点而不是列表项：
ul.list-group:after {
clear: both;
display: block;
content: "";
}
.list-group-item {
float: left;
border: 0 !important;
margin: 0px;
padding: 10px 0px;
}
a {
display: block;
padding: 5px;
border: 1px solid pink;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<div class="secondary-nav-container container">
<div class="row">
<ul class="list-group">
<li class="col-xs-3 list-group-item"><a href="#">One</a></li>
<li class="col-xs-3 list-group-item"><a href="#">One</a></li>
<li class="col-xs-3 list-group-item"><a href="#">One</a></li>
<li class="col-xs-3 list-group-item"><a href="#">One</a></li>
<li class="col-xs-3 list-group-item"><a href="#">One</a></li>
<li class="col-xs-3 list-group-item"><a href="#">One</a></li>
<li class="col-xs-3 list-group-item"><a href="#">One</a></li>
<li class="col-xs-3 list-group-item"><a href="#">One</a></li>
</ul>
</div>
</div>