Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

DDD
Freigeben: 2024-11-01 00:16:02
Original
723 Leute haben es durchsucht

How to Override Bootstrap's Column Float Behavior for More than 12 Columns in a Row?

Ü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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage