Gewusst wie: hinzufügen Lücke zwischen der Listen-Elemente in Bootstrap grid?

Ich versuche, mich ein zweistufiges horizontalen Liste in der bootstrap. Es ist wie eine sekundäre nav, der wird sich unter der Kopfzeile der Seite (damit es nicht gewickelt werden, im nav-tags).

Ich versuche es mit einer Liste, aber ich habe Probleme mit dem Abstand. Da muss es werden 4 Elemente breit (4 oben, 4 unten) ich mache jedes list-Element in ein col-md-3 (weil 12/4 = 3).

So weit, ich bekomme Sie im line-up horizontal, aber ich kann nicht herausfinden, einen Weg, um eine Trennung zwischen Ihnen, ohne drücken der 4. Punkt nach unten auf die nächste Ebene. Ich habe schon mit margin-um etwas Platz zwischen Ihnen, aber wie ich sagte, dass es nur bricht es.

Hier ist der 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>

Das Ziel ist es, zwei Reihen mit 4 list-Elemente im einzelnen, die bis nimmt die gesamte Breite der Zeile, und stapeln Sie auf der jeweils anderen. Mit Abstand zwischen den einzelnen Listen-Element, damit es nicht so aussieht, es ist nur ein Riesen horizontale Linie über den oberen Rand jeder Zeile werden soll, muss es Raum zwischen den einzelnen Listen-Elemente horizontale Linie an der Spitze.

InformationsquelleAutor Krang | 2016-01-12
Schreibe einen Kommentar