Wie erstelle ich ein 7-Spalten-Rastersystem in Bootstrap?

Sieben gleiche Spalten in Bootstrap erhalten

Die Herausforderung

Sieben gleiche Spalten in Bootstrap zu erreichen, kann angesichts des Standardspaltensystems von 12 eine Herausforderung sein Spalten. Das folgende Code-Snippet demonstriert einen Versuch, mithilfe der integrierten Spaltenklassen von Bootstrap 5 gleiche Spalten zu erstellen:

<code class="html"><div class="row">
    <div class="col-md-2 col-md-offset-1"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
</div></code>

Dies führt jedoch nur zu 5 Spalten statt der gewünschten 7.

Anpassung Spaltenbreiten

Um diese Einschränkung zu überwinden, ist es notwendig, die Standardspaltenbreiten mithilfe von CSS3-@media-Abfragen zu überschreiben. Durch Anpassen der Breiteneigenschaft der Spalten basierend auf der gewünschten Anzahl von Spalten wird der gewünschte Effekt erzielt.

Code-Implementierung

Der folgende Code zeigt, wie ein 7-Spalten-Rastersystem in Bootstrap erstellt wird:

<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>

Die siebenspaltige Klasse wird zur äußeren Zeile hinzugefügt, um sie von einer Standard-Bootstrap-Zeile zu unterscheiden.

Benutzerdefiniertes CSS wird dann verwendet, um die Breite jeder Spalte zu bestimmen:

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

@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%;
  }
}

@media (min-width: 1200px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}</code>

Der Breitenwert von 14,285714285714285714285714285714 % erhält man, indem man 100 % durch 7 (die Anzahl der Spalten) dividiert und mit der Spaltennummer (in diesem Fall 1) multipliziert. Diese Berechnung stellt sicher, dass alle Spalten die gleiche Breite haben.

Durch die Kombination von benutzerdefiniertem CSS und der Sieben-Spalten-Klasse können Sie ein flexibles Rastersystem mit 7 gleichen Spalten erstellen, das sich an unterschiedliche Bildschirmgrößen anpasst.

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein 7-Spalten-Rastersystem in Bootstrap?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!