Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

Barbara Streisand
Freigeben: 2024-11-04 19:43:01
Original
377 Leute haben es durchsucht

How to Create a 7-Column Grid System 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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage