Heim > Web-Frontend > CSS-Tutorial > Wie erstelle ich sieben gleiche Spalten in Bootstrap?

Wie erstelle ich sieben gleiche Spalten in Bootstrap?

Mary-Kate Olsen
Freigeben: 2024-11-01 14:59:28
Original
575 Leute haben es durchsucht

How to Create Seven Equal Columns in Bootstrap?

Erzielen von 7 gleichen Bootstrap-Spalten

In Bootstrap ist das Erstellen von Spalten unkompliziert, aber es ist nicht immer offensichtlich, wie man weniger häufige Spaltenkonfigurationen erreicht. wie zum Beispiel sieben gleiche Spalten.

Überschreiben der Spaltenbreite mit CSS-Medienabfragen

Um sieben gleiche Spalten zu erreichen, müssen wir die Standardbreite der Bootstrap-Spalten mithilfe von CSS-Medien überschreiben Abfragen. So geht's:

  1. Erstellen Sie eine benutzerdefinierte Klasse, z. B. „seven-cols“, für den Zeilencontainer.
  2. Verwenden Sie CSS-Medienabfragen, um die Breite einzelner Spalten innerhalb dieser Zeile festzulegen Container.

CSS-Code:

<code class="css">@media (min-width: 768px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 100%;
  }
}

@media (min-width: 992px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
  }
}</code>
Nach dem Login kopieren

Berechnung der Spaltenbreite:

Die Breite wird berechnet mit die Formel:

width = 100% / 7 column-number
Nach dem Login kopieren

In diesem Fall mit sieben Spalten:

width = 100% / 7 = 14.285714285714285714285714285714%
Nach dem Login kopieren

Das bedeutet, dass jede Spalte auf 14,285714285714285714285714285714 % des übergeordneten Zeilencontainers gesetzt werden sollte.

HTML-Markup:

<code class="html"><div class="container">
  <div class="row seven-cols">
    <div class="col-md-1">Col 1</div>
    <div class="col-md-1">Col 2</div>
    <div class="col-md-1">Col 3</div>
    <div class="col-md-1">Col 4</div>
    <div class="col-md-1">Col 5</div>
    <div class="col-md-1">Col 6</div>
    <div class="col-md-1">Col 7</div>
  </div>
</div></code>
Nach dem Login kopieren

Arbeitsdemo:

Schauen Sie sich die Arbeitsdemo auf jsbin an, um die sieben gleichen Spalten in Aktion zu sehen :
https://jsbin.com/vuvut/3/edit?css,output

Das obige ist der detaillierte Inhalt vonWie erstelle ich sieben gleiche Spalten in Bootstrap?. 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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage