Kann das Bootstrap-Grid-System 7 gleiche Spalten erstellen?

Das Rastersystem von Bootstrap mit 7 gleichen Spalten

Bei der Arbeit mit Bootstrap kann es schwierig sein, Layouts mit einer ungeraden Anzahl von Spalten zu erstellen. Das Bootstrap-Rastersystem hält sich normalerweise an gerade Zahlen, sodass sich viele fragen, ob es machbar ist, 7 gleiche Spalten zu haben.

Die Antwort liegt im Überschreiben der Spaltenbreiten mithilfe von CSS3-@media-Abfragen. So können Sie es erreichen:

1. Deklarieren Sie die Containerklasse: Beginnen Sie mit der Erstellung einer Containerklasse, in der sich die 7 Spalten befinden. Zum Beispiel:

   <code class="html"><div class="container">
    ...
   </div></code>

2. Definieren Sie die Zeilen- und Spaltenstruktur: Definieren Sie innerhalb des Containers eine Zeile und 7 Spalten mit der gewünschten Klasse:

   <code class="html"><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></code>

3. Spaltenbreite berechnen: Bestimmen Sie die passende Spaltenbreite anhand der Anzahl der Spalten (in diesem Fall 7). Die Formel für die Breite lautet:

   Width = 100% / Number of Columns

   Bei 7 Spalten beträgt die Breite also 100 % / 7 ≈ 14,2857 %.

4. Spaltenbreite überschreiben Verwenden von Medienabfragen: Um die Standardspaltenbreite zu überschreiben, verwenden Sie CSS-Medienabfragen, um auf bestimmte Haltepunkte abzuzielen. Zum Beispiel:

   <code class="css">@media (min-width: 992px) {
     .seven-cols .col-md-1 {
    width: 14.285714285714285714285714285714%;
     }
   }</code>

Durch die Einbeziehung dieser Medienabfragen können Sie sicherstellen, dass die Spaltenbreiten basierend auf der Bildschirmgröße angepasst werden.

Arbeitsdemo:

Besuchen Sie diese Online-Demo, um die 7 gleichen Säulen in Aktion zu sehen:
[Link zur Demo]

Das obige ist der detaillierte Inhalt vonKann das Bootstrap-Grid-System 7 gleiche Spalten erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!