Wie kann ich sicherstellen, Spalten, wickeln Sie ebenso in Twitter Bootstrap 3?

Wenn ich eine unbekannte Anzahl der Elemente anzeigen, die jeweils in eine eigene Spalte, gibt es einen Weg, um Sie zu wickeln ebenso, ohne dass Sie neue Zeilen für jeden?

Habe ich

<div class="row">
    <!-- 1st col --><div class="col-md-3 col-sm-4 col-xs-6"><h1>Title lorem</h1><p>Short</p></div>
    <!-- 2nd col --><div class="col-md-3 col-sm-4 col-xs-6"><h1>Title lorem</h1><p>Description lorem</p></div>
    ...
    <!-- nth col --><div class="col-md-3 col-sm-4 col-xs-6"><h1>Title lorem</h1><p>Description lorem that might be long</p></div>
</div>

Spalten in unterschiedlichen Höhen, die manchmal führt zu ungleich verteilten Spalten:

Ist es möglich, die Spalten immer wickeln Sie Sie in Reihen von 4 Spalten (für medium), 3 Spalten (für die kleine) oder 2 Spalten (extra-klein) nur mit CSS, oder muss ich in einigen JS-oder eine server-side-Programmierung um neue Zeilen zu erstellen?

InformationsquelleAutor JennyDanger | 2013-11-11

2

Das ist leider nicht, wie das Netz funktioniert. Sie könnte so etwas wie Mauerwerk oder unterschiedliche Container generiert für jeden Haltepunkt mit php. z.B.:
```
<div class ="visible-xs"><div class ="row">... </div></div>
<div class ="visible-sm"><div class ="row">... </div></div>
<div class ="visible-md"><div class ="row">... </div></div>
```
Hatte Angst, dass ich gehen werde, mit Mauerwerk, danke
Du bist herzlich willkommen. Sie können auch versuchen, mithilfe von css-Spalten in Kombination mit media queries, wenn Sie cross-browser nicht zu viel von einem Problem für Sie.

InformationsquelleAutor hugo der hungrige
15

Dort ist der Weg zu klar Bootstrap-Spalten wie erwähnt von Maciej. Diese kann getan werden, auf diese Weise:
```
 .col-lg-3:nth-child(4n+1){
   clear: left;
 }
```
Artikel enthält die volle Quell, das macht es universell funktionieren von sm zu lg.

danke!!! das ist wirklich den Tag gerettet.. auch nur ein Hinweis, aber es funktioniert nur, wenn alle Spalten gleich groß sind.

InformationsquelleAutor gertas
13

Wenn ich dein problem richtig verstanden, sollte es genug, um nur für .clearfix entsprechend nach jedem Satz von Elementen, die müssen in einer Zeile stehen.

Überprüfen Sie die Beispiel

Und alternative Lösung ist die Verwendung von CSS :nth-child pseudo-Klasse in Kombination mit media queries. Für jede Auflösung, da wäre eine andere n-th element mit clear:both, das wäre eine neue Zeile.

Werfen Sie einen Blick auf eine schnellen überblick über wie zu verwenden :nth-child.

Danke--+1 für das Beispiel. Sieht gut aus aber muss man wissen, welche Inhalte werden länger als die anderen, und da bin ich auf das Auffüllen aus einer DB kann ich nicht wissen, vor der Zeit.
+1 für das Beispiel. intelligente Weise, es zu tun
Funktioniert perfekt. Dies sollte die akzeptierte Antwort, IMO.

InformationsquelleAutor Maciej Gurban

Verwenden Sie Responsive-Spalte Setzt: http://getbootstrap.com/css/#grid-responsive-resets

Ich war die Schaffung eines Ereignis-viewer, die zeigen 12 verschiedene Veranstaltungen. Im large-mode-ich wollte, dass Sie 4x3 -, Mittel-3x4, kleine 2x6, x-small, nur gestapelt.

<div>
       <div class="col-lg-3 col-md-4 col-sm-6">Text 1</div>
       <div class="col-lg-3 col-md-4 col-sm-6">Text 2</div>  

          <div class="clearfix visible-sm-block"></div>

       <div class="col-lg-3 col-md-4 col-sm-6">Text 3</div>

          <div class="clearfix visible-md-block"></div>

       <div class="col-lg-3 col-md-4 col-sm-6">Text 4</div>

          <div class="clearfix visible-sm-block visible-lg-block"></div>

       <div class="col-lg-3 col-md-4 col-sm-6">Text 5</div>
       <div class="col-lg-3 col-md-4 col-sm-6">Text 6</div>

          <div class="clearfix visible-sm-block visible-md-block"></div>

       <div class="col-lg-3 col-md-4 col-sm-6">Text 7</div>
       <div class="col-lg-3 col-md-4 col-sm-6">Text 8</div>    

          <div class="clearfix visible-sm-block visible-lg-block"></div>

       <div class="col-lg-3 col-md-4 col-sm-6">Text 9</div>

          <div class="clearfix visible-md-block"></div>

       <div class="col-lg-3 col-md-4 col-sm-6">Text 10</div>    

          <div class="clearfix visible-sm-block"></div>

       <div class="col-lg-3 col-md-4 col-sm-6">Text 11</div>
       <div class="col-lg-3 col-md-4 col-sm-6">Text 12</div>
</div>

InformationsquelleAutor Rae

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.