Question

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

我试图使用列表来做，但是我遇到了间距问题。由于它需要4个项目（顶部4个，底部4个），我将每个列表项目放入col-md-3（因为12/4 = 3）。

到目前为止，我可以让他们横向排队，但我无法找到一种方法来实现它们之间的任何分离，而无需将第4项推到下一级。我一直在使用保证金来获得它们之间的空间，但就像我说的那样，只会破坏它。

这是代码......

＆＃13;

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

＆＃13;

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

＆＃13;

目标是拥有两行，每行包含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>

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

1 个答案: