Bei der Arbeit mit Bootstrap ist es üblich, für ein ausgewogenes Layout gerade Spalten zu erstellen. Es kann jedoch vorkommen, dass Sie eine ungerade Anzahl von Spalten benötigen, z. B. 7.
Bootstrap bietet zwar nativ kein 7-Spalten-System, ist es aber Dies kann erreicht werden, indem die Breite der Spalten mithilfe von CSS überschrieben wird.
<code class="css">@media (min-width: 992px) { .seven-cols .col-md-1, .seven-cols .col-sm-1, .seven-cols .col-lg-1 { width: 14.285714285714285714285714285714%; *width: 14.285714285714285714285714285714%; } }</code>
Diese Medienabfrage legt die Breite aller Spalten mit der Klasse col-md-1 (sowie col-sm-1 und) fest col-lg-1;) bis 14,285714285714285714285714285714 % für mittelgroße Bildschirme oder größer. Dies stellt eine gleichmäßige Spaltenverteilung sicher.
Um die 7 Spalten aufzunehmen, benötigen Sie ein übergeordnetes Element mit der Klasse seven-cols, um die Überschreibungen anzuwenden.
<code class="html"><div class="container"> <div class="row seven-cols"> <div class="col-md-1"></div> <div class="col-md-1"></div> <div class="col-md-1"></div> <div class="col-md-1"></div> <div class="col-md-1"></div> <div class="col-md-1"></div> <div class="col-md-1"></div> </div> </div></code>
Indem Sie die Spaltenbreiten mit CSS überschreiben und ein übergeordnetes Element verwenden, können Sie mit Bootstrap ein 7-Spalten-Layout erstellen. Denken Sie daran, dass dieser Ansatz zusätzliches CSS erfordert und es immer vorzuziehen ist, wenn möglich das native Bootstrap-Grid-System beizubehalten.
Das obige ist der detaillierte Inhalt vonKönnen Sie mit Bootstrap ein 7-Spalten-Layout erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!