Wie erstelle ich sieben gleiche Spalten 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>

Berechnung der Spaltenbreite:

Die Breite wird berechnet mit die Formel:

width = 100% / 7 column-number

In diesem Fall mit sieben Spalten:

width = 100% / 7 = 14.285714285714285714285714285714%

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>

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!