Können Sie mit Bootstrap ein 7-Spalten-Layout erstellen?

Ist es möglich, mit Bootstrap 7 gleiche Spalten zu erstellen?

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.

Spaltenbreite mit CSS überschreiben

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.

Verwendung einer übergeordneten Klasse

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>

Fazit

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!