Wie überschreibe ich das Spalten-Float-Verhalten von Bootstrap für mehr als 12 Spalten in einer Zeile?

Überschreiben des Bootstrap-Spalten-Float-Verhaltens für uneingeschränkte Spaltenanzahlen

Bootstrap 3 schreibt eine maximale Spaltenanzahl von 12 in einer Zeile vor, aber manchmal kann das passieren muss mehr verwenden. Standardmäßig sind Spalten mit einer Breite von 12 Einheiten (col-xs-12, col-sm-12 usw.) nicht schwebend, was andere schwebende Spalten in derselben Zeile beeinträchtigen kann.

Zur Adressierung Dazu kann eine Override-Klasse angewendet werden, um eine beliebige Anzahl von Spalten korrekt schweben zu lassen.

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

Diese Override stellt sicher, dass alle Spalten in Zeilen mit der Klasse „Großgruppe“ unabhängig von ihrer Breite schweben .

Beispielverwendung:

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

Obwohl es im Allgemeinen nicht empfohlen wird, die Designprinzipien von Bootstrap zu umgehen, ermöglicht diese Außerkraftsetzung eine größere Flexibilität bei der Erstellung inhaltsreicher Layouts.

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