Comment ajouter de l'écart entre les éléments de la liste dans le Bootstrap grille?

Je suis en train de le faire en deux niveaux horizontaux liste dans le bootstrap. C'est comme un secondaire nav qui va s'asseoir au-dessous de l'en-tête de page (afin de ne pas être enveloppé dans les balises nav).

Je suis en train de le faire à l'aide d'une liste, mais éprouve de la difficulté avec l'espacement. Depuis qu'il a besoin de 4 éléments de large (4 en haut, 4 en bas) je suis en train de faire chaque élément de liste dans une col-md-3 (parce que 12/4 = 3).

Jusqu'à présent, je peux les obtenir à la ligne à l'horizontale, mais je ne peux pas trouver un moyen d'obtenir une séparation entre eux sans pousser le 4ème point le niveau suivant. J'ai été en utilisant la marge pour obtenir un peu d'espace entre eux, mais comme je l'ai dit, que seul le brise.

Voici le code...

CSS:

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

HTML:

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

Le but est d'avoir deux lignes avec 4 liste des articles dans chaque qui prend toute la largeur de la ligne, et empile les uns sur les autres. Avec de l'espace entre chaque élément de liste, donc il ne ressemble pas il y a juste un géant de la ligne horizontale à travers le dessus de chaque rangée — il doit y avoir d'espace entre chaque liste-des éléments de la ligne horizontale en haut.

  • Quelque chose comme ceci?
InformationsquelleAutor Krang | 2016-01-12