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

Question

我正在尝试在 bootstrap 中制作一个两层的水平列表。它就像位于页眉下方的辅助导航(因此它不会被导航标签包裹)。

我正在尝试使用列表来完成此操作，但在间距方面遇到了问题。因为它需要 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

最好不要混合使用网格元素和样式元素。由于您的列表需要它，因此您需要将一些样式移动到 anchor 而不是列表项:

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>