Wie erweitert man Bootstrap um 3 Zeilen über die 12-Spalten-Grenze hinaus?

Anpassen von Bootstrap 3, um das 12-Spalten-Limit in Zeilen zu durchbrechen

Problem

Standardmäßig erzwingt Bootstrap 3 das Stapeln von Spalten mit mehr als 12 Einheiten vertikal aufgrund ihres „float: none“-Verhaltens. Diese Einschränkung kann dynamische Layouts behindern, bei denen mehrere Inhaltsblöcke zu einer Zeile hinzugefügt werden können.

Lösung

Um diese Einschränkung aufzuheben, können Sie benutzerdefinierte CSS-Überschreibungen anwenden, um das Verhalten von Bootstrap zu überschreiben und die Anpassung der Zeilen zu ermöglichen mehr als 12 Spalten. So geht's:

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

Implementierungsbeispiel

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

Rationalisierung

Obwohl das Standardverhalten von Bootstrap sicherstellt, dass Zeilen visuell konsistent bleiben, ist es möglicherweise nicht immer für dynamische oder dynamische Anwendungen geeignet platzbeschränkte Layouts. Diese Anpassung ermöglicht eine größere Flexibilität und Reaktionsfähigkeit in solchen Situationen.

Das obige ist der detaillierte Inhalt vonWie erweitert man Bootstrap um 3 Zeilen über die 12-Spalten-Grenze hinaus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!