如何在 Bootstrap 网格中的列表项之间添加间隙？

Question

我正在尝试在引导程序中创建一个两层的水平列表。它就像一个位于页面标题下方的辅助导航（因此它不会被包裹在导航标签中）。

我正在尝试使用列表来执行此操作，但在间距方面遇到了问题。由于它需要 4 项宽（顶部 4 项，底部 4 项），我将每个列表项设置为 col-md-3（因为 12/4 = 3）。

到目前为止，我可以让它们水平排列，但如果不将第 4 项推到下一个级别，我想不出一种方法来将它们分开。我一直在使用边距在它们之间留出一些空间，但就像我说的那样，这只会破坏它。

这是代码...

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

目标是有两行，每行有 4 个列表项，占据行的整个宽度，并相互堆叠。每个列表项之间都有间距，因此看起来每行顶部只有一条巨大的水平线 - 顶部的每个列表项水平线之间需要有空间。

Answer 1

最好不要混合网格元素和样式元素。由于您的列表需要它，您需要将一些样式移动到锚点而不是列表项：

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>