Wie verwende ich mehr als 12 Spalten in einer Bootstrap-3-Zeile?

Bootstrap 3 – Verwendung von mehr als 12 Spalten in einer Zeile

Überschreiben des Float-Verhaltens für übermäßig viele Spalten

In Bootstrap 3 normalerweise ein .row-Div enthält 12 Spalten und zusätzliche Spalten sind standardmäßig nicht schwebend. Dies kann dazu führen, dass breitere Spalten kleinere überlappen.

Um dieses Problem zu beheben, kann eine benutzerdefinierte Klasse verwendet werden, um das Float-Verhalten übermäßiger Spalten zu überschreiben:

<code class="css">/* col-xs float fix for large column groups */
.large-group .col-xs-12 {
    float: left;    
}

/* col-sm float fix for large column groups */    
@media (min-width: 768px) {    
    .large-group .col-sm-12 {    
        float: left;    
    }    
}

/* col-md float fix for large column groups */    
@media (min-width: 992px) {    
    .large-group .col-md-12 {    
        float: left;    
    }    
}

/* col-lg float fix for large column groups */    
@media (min-width: 1200px) {
    .large-group .col-lg-12 {    
        float: left;    
    }    
}</code>

Warum mehr als 12 Spalten verwenden? ?

Die Verwendung von mehr als 12 Spalten hintereinander mag zunächst kontraintuitiv erscheinen, dient aber tatsächlich dazu, die Reaktionsfähigkeit aufrechtzuerhalten. In der Bootstrap-Dokumentation heißt es:

„Wenn mehr als 12 Spalten in einer einzelnen Zeile platziert werden, wird jede Gruppe zusätzlicher Spalten als eine Einheit in eine neue Zeile umgebrochen.“

Zum Beispiel 24 Spalten in einer einzelnen Zeile würden bei einer Reduzierung der Bildschirmgröße zu zwei Zeilen mit jeweils 12 Spalten führen.

Beispielverwendung

Hier ist ein Beispiel, das zeigt, wie die benutzerdefinierte Klasse verwendet wird:

<code class="html"><div class="container">
    <div class="row large-group" style="background-color:#ebebeb;">    
        <div class="col-xs-9"><div style="background-color:#babeee;"><p>col 9</p></div></div>    
        <div class="col-xs-3"><div style="background-color:#fefeeb;"><p>col 3</p></div></div>    
        <div class="col-xs-12"><div style="background-color:#bada55;"><p>col 12</p></div></div>    
    </div>    
</div></code>

Das obige ist der detaillierte Inhalt vonWie verwende ich mehr als 12 Spalten in einer Bootstrap-3-Zeile?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!