Wie kann ich alle Bootstrap-Spalten auf die gleiche Höhe bringen?

Question

Ich verwende Bootstrap. Wie kann ich drei Spalten alle auf die gleiche Höhe bringen?

Hier ist ein Screenshot des Problems. Ich möchte, dass die blauen und roten Spalten die gleiche Höhe wie die gelbe Spalte haben.

Hier ist der Code:

        some content

        Katzen

        etwas mehr Inhalt

Answer 1

Ich weiß, ich bin sehr spät dran, aber jetzt kannst du das Style-Attribut "min-height" verwenden, um dein Ziel zu erreichen.

Answer 2

.row.container-height {
    overflow: hidden;
}

.row.container-height>[class*="col-"] {
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

wo .container-height ist die Stilklasse, die zu einem .row-styled Element hinzugefügt werden muss, um sicherzustellen, dass alle seine .col*-Kinder die gleiche Höhe haben.

Das Anwenden dieser Styles nur auf bestimmte .row (mit .container-height, wie im Beispiel) vermeidet auch das Anwenden des Überlaufs von Margin und Padding auf alle .col*.

Answer 3

Hier ist meine Lösung (kompiliertes CSS):

.row.row-xs-eq {
  display: table;
  table-layout: fixed;
  margin: 0;
}

.row.row-xs-eq::before {
  content: none;
}

.row.row-xs-eq::after {
  content: none;
}

.row.row-xs-eq > [class^='col-'] {
  display: table-cell;
  float: none;
  padding: 0;
}

@media (min-width: 768px) {
  .row.row-sm-eq {
    display: table;
    table-layout: fixed;
    margin: 0;
  }

  .row.row-sm-eq::before {
    content: none;
  }

  .row.row-sm-eq::after {
    content: none;
  }

  .row.row-sm-eq > [class^='col-'] {
    display: table-cell;
    float: none;
    padding: 0;
  }
}

@media (min-width: 992px) {
  .row.row-md-eq {
    display: table;
    table-layout: fixed;
    margin: 0;
  }

  .row.row-md-eq::before {
    content: none;
  }

  .row.row-md-eq::after {
    content: none;
  }

  .row.row-md-eq > [class^='col-'] {
    display: table-cell;
    float: none;
    padding: 0;
  }
}

@media (min-width: 1200px) {
  .row.row-lg-eq {
    display: table;
    table-layout: fixed;
    margin: 0;
  }

  .row.row-lg-eq::before {
    content: none;
  }

  .row.row-lg-eq::after {
    content: none;
  }

  .row.row-lg-eq > [class^='col-'] {
    display: table-cell;
    float: none;
    padding: 0;
  }
}

Also sieht Ihr Code so aus:

Im Grunde handelt es sich um das gleiche System, das Sie mit Klassen .col-* verwenden, mit dem Unterschied, dass Sie die Klassen .row-* auf die Zeile selbst anwenden müssen.

Mit .row-sm-eq werden die Spalten auf XS-Bildschirmen gestapelt. Wenn Sie nicht möchten, dass sie auf irgendeinem Bildschirm gestapelt werden, können Sie .row-xs-eq verwenden.

Die tatsächlich verwendete SASS-Version:

.row {
  @mixin row-eq-height {
    display: table;
    table-layout: fixed;
    margin: 0;

    &::before {
      content: none;
    }

    &::after {
      content: none;
    }

    > [class^='col-'] {
      display: table-cell;
      float: none;
      padding: 0;
    }
  }

  &.row-xs-eq {
    @include row-eq-height;
  }

  @media (min-width: $screen-sm-min) {
    &.row-sm-eq {
      @include row-eq-height;
    }
  }

  @media (min-width: $screen-md-min) {
    &.row-md-eq {
      @include row-eq-height;
    }
  }

  @media (min-width: $screen-lg-min) {
    &.row-lg-eq {
      @include row-eq-height;
    }
  }
}

Live-Demo

---

Hinweis: Die Mischung von .col-xs-12 und .col-xs-6 innerhalb einer einzelnen Zeile würde nicht richtig funktionieren.

Answer 4

19.03.2019

**Bootstrap 4 Equal Height Lösung**

Bootstrap Utilities/flex für gleichmäßige Höhe

Live-Beispiel in Codepen

Gleiche Höhe durch Bootstrap-Klasse mit fixierter Eltern-Div-Höhe oder min-height

    Flex-Höhe Testtext zum Beispiel, Flex-Höhe Testtext zum Beispiel
    Flex-Element
    Flex-Element
    Flex-Element

.bd-highlight {
    background-color: rgba(86,61,124,.15);
    border: 1px solid rgba(86,61,124,.15);
}
.fixed-height-200 {
  min-height: 200px;
}

    Flex-Element  1111111111
    Flex-Element
    Flex-Element
    Flex-Element
    Flex-Element
    Flex-Element
    Flex-Element  1111111111
    Flex-Element  1111111111
    Flex-Element  1111111111
    Flex-Element
    Flex-Element
    Flex-Element
    Flex-Element
    Flex-Element
    Flex-Element

Answer 5

Für diejenigen, die nach einer schnellen, einfachen Lösung suchen - wenn Sie einen relativ konsistenten Satz von Blockinhalten haben und auf der Suche nach einer Mindesthöhe für das Div-Element sind, die etwas größer ist als der größte Block, kann es einfacher sein umzusetzen.

.align-box {
    min-height: 400px;
}