0

Ich benutze Bootstrap 3 Responsive Grid, und ich habe ein Problem mit meinem Layout. HierBootstrap Responsive Grid-Layout: kann keine Zeilen von 3 Div anzeigen

ist die HTML-Struktur habe ich heute:

<div class="row"> 
    <div class="col-xs-6 col-sm-4 col-md-3"></div> 
    <div class="col-xs-6 col-sm-4 col-md-3"></div> 
    <div class="col-xs-6 col-sm-4 col-md-3"></div> 
    <div class="col-xs-6 col-sm-4 col-md-3"></div> 
</div> 
<div class="row"> 
    <div class="col-xs-6 col-sm-4 col-md-3"></div> 
    <div class="col-xs-6 col-sm-4 col-md-3"></div> 
    <div class="col-xs-6 col-sm-4 col-md-3"></div> 
    <div class="col-xs-6 col-sm-4 col-md-3"></div> 
</div> 

Dies funktioniert gut für "mobile" (col-xs-6) und "Desktop" (kalt-md-3), aber auf „Tablette "(col-sm-4), sieht es so aus (* ein div zu sein):

* * * 
* 
* * * 
* 

Kann jemand helfen?

+1

Bootstrap verwendet ein 12-Spalten-Raster, aber Sie versuchen, 16 Spalten in Ihr Layout zu integrieren. Aus diesem Grund sehen Sie die vierte Spalte unter den ersten drei col-sm-4. – vanburen

Antwort

2

Ich glaube, Sie column wrapping-Funktion des Bootstrap ..

Demo nutzen wollen : http://codeply.com/go/TrLJF1qIlC

<div class="row"> 
    <div class="col-xs-6 col-sm-4 col-md-3"> 
    </div> 
    <div class="col-xs-6 col-sm-4 col-md-3"> 
    </div> 
    <div class="col-xs-6 col-sm-4 col-md-3"> 
    </div> 
    <div class="col-xs-6 col-sm-4 col-md-3"> 
    </div> 
    <div class="col-xs-6 col-sm-4 col-md-3"> 
    </div> 
    <div class="col-xs-6 col-sm-4 col-md-3"> 
    </div> 
    <div class="col-xs-6 col-sm-4 col-md-3"> 
    </div> 
    <div class="col-xs-6 col-sm-4 col-md-3"> 
    </div> 
</div> 

Lesen Sie mehr abo ut the Bootstrap grid und Spaltenumbruch.

+1

Großartig, es funktioniert nicelly, in der Tat war mein Fehler zu setzen .with divs everyhere ... Danke! – VinZ

0

Sie sollten col-sm-3 anstelle von col-sm-4

Demo hier verwenden: https://jsfiddle.net/IA7medd/6bzf4ze7/

<div class="row"> 
    <div class="col-xs-6 col-sm-3 col-md-3"></div> 
    <div class="col-xs-6 col-sm-3 col-md-3"></div> 
    <div class="col-xs-6 col-sm-3 col-md-3"></div> 
    <div class="col-xs-6 col-sm-3 col-md-3"></div> 
</div> 
<div class="row"> 
    <div class="col-xs-6 col-sm-3 col-md-3"></div> 
    <div class="col-xs-6 col-sm-3 col-md-3"></div> 
    <div class="col-xs-6 col-sm-3 col-md-3"></div> 
    <div class="col-xs-6 col-sm-3 col-md-3"></div> 
</div>