Bootstrap – 5-Spalten-Layout

Lesezeit: 3 Minuten

Bootstrap 5 Spalten Layout
Wodokan

Ich versuche, ein 5-Spalten-Layout in voller Breite zu erhalten, kann aber keine Lösung finden, die meinen Anforderungen entspricht

Hier ist der Code, den ich verwende 

  <!-- Content Section -->
    <div class="container">
      <div class="row">
        <div class="col-lg-12" style="border: 1px solid red">
          <div class="row">
            <div class="col-xs-12">
              <div class="col-xs-2 col-xs-offset-1" id="p1">One</div>
              <div class="col-xs-2" id="p2">Two</div>
              <div class="col-xs-2" id="p3">Three</div>
              <div class="col-xs-2" id="p4">Four</div>
              <div class="col-xs-2" id="p5">Five</div>
            </div>
            <!-- //col-lg-12 -->
          </div>
          <!-- //row -->
          lorem
        </div>
      </div>
      <!-- //col-lg-12 -->
    </div>
    <!-- //row -->
  </div>
  <!-- //container -->

Als Ergebnis bekomme ich Geben Sie hier die Bildbeschreibung ein

Und hier ist, was ich versuche zu erreichen. 5-Spalten-Layout in voller Breite mit einem Leerzeichen zwischen jeder Spalte
Geben Sie hier die Bildbeschreibung ein

  • Mögliches Duplikat von fünf gleichen Spalten in Twitter Bootstrap

    – benomatis

    10. März ’16 um 10:00 Uhr

Bootstrap 5 Spalten Layout
Vanille

UPDATE, 2021: Für moderne Bootstrap (4+) empfehle ich die Antwort von Zim, da sie Bootstrap-Flex-Klassen auf natürliche Weise verwendet

.col-xs-2{
    background:#00f;
    color:#FFF;
}
.col-half-offset{
    margin-left:4.166666667%
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row" style="border: 1px solid red">
        <div class="col-xs-2" id="p1">One</div>
        <div class="col-xs-2 col-half-offset" id="p2">Two</div>
        <div class="col-xs-2 col-half-offset" id="p3">Three</div>
        <div class="col-xs-2 col-half-offset" id="p4">Four</div>
        <div class="col-xs-2 col-half-offset" id="p5">Five</div>
        <div>lorem</div>
    </div>
</div>

Das sollte in Ordnung sein.

  • Funktioniert, gute Idee! Wichtig ist, je nach Anzahl der Spalten den richtigen %-Wert für die Lücken zu verwenden.

    – eyal_katz

    19. März 17 um 4:23 Uhr

  • Es gibt eine neue verbesserte Antwort. stackoverflow.com/a/66546867/9207553

    – Mohammad Ayoub Khan

    9. März 21 um 12:29 Uhr

1643913128 719 Bootstrap 5 Spalten Layout
Zim

5 Spalten mit Bootstrap 4

Hier sind 5 gleiche Spalten voller Breite (kein zusätzliches CSS oder SASS) Verwendung der Auto-Layout-Raster..

<div class="container-fluid">
    <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
    </div>
</div>

http://codeply.com/go/MJTglTsq9h

Diese Lösung funktioniert, weil Bootstrap 4 jetzt Flexbox ist. Sie können die 5 Spalten dazu bringen, innerhalb derselben zu wickeln .row mit einem Clearfix-Break wie z <div class="col-12"></div> oder <div class="w-100"></div> alle 5 Spalten.

Aktualisierung 2020

Ab Bootstrap 4.4 können Sie auch die verwenden row-cols-5 Klasse auf der row…

<div class="container">
    <div class="row row-cols-5">
        <div class="col">
            X
        </div>
        <div class="col">
            X
        </div>
        <div class="col">
            X
        </div>
        <div class="col">
            X
        </div>
        <div class="col">
            X
        </div>
        <div class="col">
            X
        </div>
    </div>
</div>

https://codeply.com/p/psJLGuBuc3

  • Bitte, wie füge ich später ein col-xs-6 hinzu, um ein ansprechendes Layout in der mobilen Ansicht zu erreichen und zwei gleiche Raster zu erhalten?

    – Ausdauer Ekhoragbon

    22. Dezember 17 um 11:11 Uhr

  • @ZimSystem – Könnten Sie bitte erläutern, “Sie können die 5 Spalten dazu bringen, innerhalb derselben .row mit einem Clearfix-Break wie

    oder

    sehr 5 Spalten.”

    – blauer

    31. Juli 18 um 17:24 Uhr

  • Aber was ist, wenn ich 10 oder mehr Kisten habe? und ich muss 5 Kästchen in jeder Reihe behalten.

    – Sinju Angajan

    23. Januar 19 um 12:04 Uhr

  • Einfache und richtige Antwort. Diese Frage wurde mir früher in einem Vorstellungsgespräch gestellt.

    – Dales Vu

    8. April 20 um 3:58 Uhr

  • @ TomášVavřinka .. ja, sie sind gleich, bis der übergeordnete Container / Inhalt dies nicht zulässt, was die Flexbox-Spezifikation ist und in den meisten Fällen effektiv funktioniert, wie es für die Person, die die Frage gestellt hat, funktioniert. Müssen Sie gleich mit Gewalt einsetzen flex-basis: 20%

    – Sim

    14. Oktober 20 um 12:53 Uhr

Standard-Bootstrap (Version 4.6) Grid ermöglicht Ihnen dies.

Sie können 7, 7 11 Spalten in einer Reihe machen.

<div class="container">
  <div class="row row-cols-5">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Responsive Version davon.

<div class="container">
  <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-5">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Fügen Sie dies einfach zu Ihrem CSS hinzu

/* 5 Columns */

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-xs-15 {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
    .col-sm-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}

Manchmal werde ich gebeten, einige ziemlich seltsame Rasterlayouts in bestehenden Bootstrap-Websites zu verwenden (ohne den aktuellen Code durcheinander zu bringen). Ich habe eine separate CSS-Datei erstellt, die ich einfach in aktuelle Bootstrap-Projekte einfügen und die dort enthaltenen Rasterlayoutstile verwenden kann. Hier ist, was die Datei bootstrap-5ths.css enthält, zusammen mit einem Beispiel, wie sie für Bootstrap-Version 4 aussieht.

Wenn Sie dies mit Bootstrap-Version 3 verwenden möchten, entfernen Sie einfach die col-xl-*-Stile und ändern Sie die Mindestbreiten von 576px auf 768px, 768px auf 992px und 992px auf 1200px.

.col-xs-5ths, .col-sm-5ths, .col-md-5ths, .col-lg-5ths, .col-xl-5ths, 
.col-xs-two5ths, .col-sm-two5ths, .col-md-two5ths, .col-lg-two5ths, .col-xl-two5ths, 
.col-xs-three5ths, .col-sm-three5ths, .col-md-three5ths, .col-lg-three5ths, .col-xl-three5ths, 
.col-xs-four5ths, .col-sm-four5ths, .col-md-four5ths, .col-lg-four5ths, .col-xl-four5ths, 
.col-xs-five5ths, .col-sm-five5ths, .col-md-five5ths, .col-lg-five5ths, .col-xl-five5ths, 
{
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 576px) {
    .col-sm-5ths {width: 20%;float: left;}
    .col-sm-two5ths {width: 40%;float: left;}
    .col-sm-three5ths {width: 60%;float: left;}
    .col-sm-four5ths {width: 80%;float: left;}
}

@media (min-width: 768px) {
    .col-md-5ths {width: 20%;float: left;}
    .col-md-two5ths {width: 40%;float: left;}
    .col-md-three5ths {width: 60%;float: left;}
    .col-md-four5ths {width: 80%;float: left;}
}

@media (min-width: 992px) {
    .col-lg-5ths {width: 20%;float: left;}
    .col-lg-two5ths {width: 40%;float: left;}
    .col-lg-three5ths {width: 60%;float: left;}
    .col-lg-four5ths {width: 80%;float: left;}
}

@media (min-width: 1200px) {
    .col-xl-5ths {width: 20%;float: left;}
    .col-xl-two5ths {width: 40%;float: left;}
    .col-xl-three5ths {width: 60%;float: left;}
    .col-xl-four5ths {width: 80%;float: left;}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
  <div class="col-md-5ths">1</div>
  <div class="col-md-5ths">1</div>
  <div class="col-md-5ths">1</div>
  <div class="col-md-5ths">1</div>
  <div class="col-md-5ths">1</div>
 </div>
<div class="row">
  <div class="col-md-5ths">1</div>
  <div class="col-md-two5ths">2</div>
  <div class="col-md-two5ths">2</div>
</div>
<div class="row">
  <div class="col-md-three5ths">3</div>
  <div class="col-md-two5ths">2</div>
 </div>
<div class="row">
  <div class="col-md-four5ths">4</div>
  <div class="col-md-5ths">1</div>
 </div>
<div class="row">
  <div class="col-md-five5ths">5</div>
 </div>
 </div>

1643913128 784 Bootstrap 5 Spalten Layout
Ganesh K

<div class="row">
    <div class="col">One</div>
    <div class="col">Two</div>
    <div class="col">Three</div>
    <div class="col">Four</div>
    <div class="col">Five</div>
</div>

Sie können sie nach Bedarf anpassen, indem Sie eine Medienabfrage schreiben. Damit wir ein responsives Design beibehalten können

@media(max-width: 425px) {
    .col {
      flex-basis: auto;
      -webkit-box-flex: 1;
      flex-grow: 1;
      max-width: 100%;
    }
}
@media(min-width: 426px) and  (max-width: 961px){
  .col {
    flex-basis: auto;
    -webkit-box-flex: 1;
    flex-grow: 1;
    max-width: 50%;
  }
}

1643913129 739 Bootstrap 5 Spalten Layout
Pankaj Upadhyay

CSS

.bg{
    background-color: #9DC3E6;
    border-radius: 10px;
    color: #fff;
    padding: 15px;
}
.col-xs-5-cols,
.col-sm-5-cols,
.col-md-5-cols,
.col-lg-5-cols {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-xs-5-cols {
  width: 20%;
  float: left;
}

@media (min-width: 768px) {
  .col-sm-5-cols {
      width: 20%;
      float: left;
  }
}

@media (min-width: 992px) {
  .col-md-5-cols {
      width: 20%;
      float: left;
  }
}

@media (min-width: 1200px) {
  .col-lg-5-cols {
      width: 20%;
      float: left;
  }
}

html

<div className="row">
    <div className="col-md-5-cols">1<div className="bg"></div></div>
    <div className="col-md-5-cols">2<div className="bg"></div></div>
    <div className="col-md-5-cols">3<div className="bg"></div></div>
    <div className="col-md-5-cols">4<div className="bg"></div></div>
    <div className="col-md-5-cols">5<div className="bg"></div></div>
</div>

.

758690cookie-checkBootstrap – 5-Spalten-Layout

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy

Contact - Terms and Conditions - Privacy Policy