Wie überschreibe ich das 12-Spalten-Limit von Bootstrap 3 hintereinander?

Bootstrap 3: Behebung von Spaltenbeschränkungen in Zeilen

Das Standardverhalten von Bootstrap 3 begrenzt die Anzahl der Spalten in einer Zeile auf 12, was zu Problemen führt, wenn versuchen, diese Grenze zu überschreiten. Dies kann beim dynamischen Hinzufügen mehrerer Inhaltsblöcke auftreten und zu unerwünschten Überlappungen führen.

Bootstraps Verhalten überschreiben

Um diese Einschränkung zu beheben, kann eine benutzerdefinierte Klasse zum Überschreiben erstellt werden Bootstraps Standardverhalten und ermöglicht mehr als 12 Spalten in einer Zeile. Diese Klasse kann auf den .row-Container angewendet werden.

Überlegungen zur Reaktionsfähigkeit

Während mehr als 12 Spalten in einer einzelnen Zeile zulässig sind, ist es wichtig, die Reaktionsfähigkeit zu berücksichtigen. Bootstrap nutzt den Spaltenumbruch, um sicherzustellen, dass die Spalten über verschiedene Bildschirmgrößen hinweg ausgerichtet bleiben.

Beispielcode

Der folgende Code demonstriert die Implementierung der benutzerdefinierten Klasse und stellt sicher, dass die Spalten korrekt und gleichmäßig schweben bei mehr als 12 Einheiten in Folge:

<code class="css">.large-group .col-xs-12 {
  float: left;
}

@media (min-width: 768px) {
  .large-group .col-sm-12 {
    float: left;
  }
}

@media (min-width: 992px) {
  .large-group .col-md-12 {
    float: left;
  }
}

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

Markup-Beispiel

Das folgende Markup zeigt die Verwendung der benutzerdefinierten Klasse:

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

Vorteile

Die Verwendung dieses Ansatzes bietet:

• Flexibilität zur Anpassung an unterschiedliche Inhaltslayouts.
• Verbesserte Reaktionsfähigkeit, die sich dynamisch an verschiedene Bildschirmgrößen anpasst .

Das obige ist der detaillierte Inhalt vonWie überschreibe ich das 12-Spalten-Limit von Bootstrap 3 hintereinander?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!