Höhe der Spalten in der Bootstrap-4

Habe ich ein wenig nicht-konventionellen DIV in diesem design, wie unten gezeigt. Könnte ich eine Höhe und es tun, aber ich will es dynamisch zu ändern:
Höhe der Spalten in der Bootstrap-4
Zum Beispiel, wenn das DIV-Element hat mehr Inhalt und der Höhe von änderungen in einem der Blocks auf der rechten, der linken DIV automatisch anpassen, es ist die Höhe, als gut. Ich Frage mich, ob flex helfen könnte. Hier ist, wie sollte es ändern in:
Höhe der Spalten in der Bootstrap-4

Habe ich das HTML so weit:

<div class="container">
  <div class="row row-eq-height">
      <div class="col-sm-8 col-8">
        <div class="black">
          <p>Bar Graph or Line Graph</p>
        </div>
      </div>
      <div class="col-sm-4 col-4">
        <div class="red">
          <p>numbers</p>
        </div>
        <div class="purple">
          <p>numbers</p>
        </div>
        <div class="green">
          <p>numbers</p>
        </div>
        <div class="blue">
          <p>numbers</p>
        </div>
      </div>
  </div>
</div>

und CSS:

p { color: #fff; }
.black { background-color: black; }
.green { background-color: green; }
.red { background-color: red; }
.blue { background-color: blue; }
.purple { background-color: purple; }

JSFiddle Demo

Equal height columns with CSS | überarbeitete Geige

InformationsquelleAutor Elaine Byene | 2017-10-06

  1. 4

    Können Sie flexbox.

    Update

    Und ein anderer Weg:

    https://jsfiddle.net/persianturtle/ar0m0p3a/5/

    .row-eq-height > [class^=col] {
  display: flex;
  flex-direction: column;
}

.row-eq-height > [class^=col]:last-of-type div {
  margin: 10px;
}

.row-eq-height > [class^=col]:last-of-type div:first-of-type {
  margin-top: 0;
}

.row-eq-height > [class^=col]:last-of-type div:last-of-type {
  margin-bottom: 0;
}

.row-eq-height > [class^=col]:first-of-type .black {
  flex-grow: 1;
}

    Update

    Einen besseren Weg mit mehr spezifische Klassen:

    https://jsfiddle.net/persianturtle/ar0m0p3a/3/

    .row-eq-height > [class^=col]:first-of-type {
  display: flex;
}

.row-eq-height > [class^=col]:first-of-type .black {
  flex-grow: 1;
}

.blue p {
  margin: 0;
}

    Originelle Art und Weise:

    https://jsfiddle.net/persianturtle/ar0m0p3a/1/

    [class^=col] {
  display: flex;
  flex-direction: column;
}

[class^=col] div {
  flex-grow: 1
}
    Absolut. Verwenden Sie eine Auswahl, die für Sie Sinn macht. Ich würde empfehlen zuerst zu lernen über flexbox, da es ein wenig knifflig am Anfang. Fühlen Sie sich frei, zu Fragen flexbox-spezifischen Fragen, wenn Sie nicht weiterkommen. Glücklich zu helfen.
    Ich habe aktualisiert mit einer anderen Umsetzung mithilfe spezifischer / semantic-Selektoren.
    Perfekt! Der ursprüngliche code hatte Probleme mit den anderen DIVs. Vielen Dank 🙂
    Ich habe einen Dritten Weg, da auch die zweite Möglichkeit, nur die Gewährleistung, dass die linke Spalte (.black) war passend die Höhe der ersten Spalte mit den vier Farben. Die Dritte Möglichkeit stellt sicher, dass die Zeile wirklich gleich hoch sind.
    Ich Lerne so viel! Danke dir mal wieder 🙂 🙂

    InformationsquelleAutor Raphael Rafatpanah

  2. 10

    Bist du mit Bootstrap 4, richtig? Bootstrap-4 implementiert flexbox standardmäßig aktiviert, und Sie können dies lösen, sehr einfach, während mit rein-Klassen, Bootstrap-4 bietet:

    <div class="container">
  <div class="row">
      <div class="col-sm-8 col-8 black">
          <p>Bar Graph or Line Graph</p>
      </div>
      <div class="col-sm-4 col-4 d-flex align-content-around flex-wrap">
        <div class="red">
          <p>numbers and more and so on and on and on</p>
        </div>
        <div class="purple">
          <p>numbers</p>
        </div>
        <div class="green">
          <p>numbers</p>
        </div>
        <div class="blue">
          <p class="mb-0">numbers</p>
        </div>
      </div>
  </div>
</div>

    JS Fiddle link: https://jsfiddle.net/ydjds2ko/

    Details:

    • Brauchen Sie nicht die Klasse row-eq-height (es ist nicht in Bootstrap4
      sowieso), weil Höhe ist Standard.

    • Den ersten div mit der Klasse col-sm-8 hat die richtige Höhe, es ist nur nicht sichtbar mit dem schwarzen hintergrund, da das innere div hat eine eigene Höhe. Ich einfach entfernt die inneren div und fügte hinzu, die Klasse black col. Wenn Sie brauchen, inneren div, geben Sie die (Bootstrap4) Klasse h-100 welche in der Höhe verstellt werden, um das übergeordnete element.

    • dem div mit der Klasse col-sm-4 eine der Klassen d-flex-align-content-rund um flex-wrap. Sie sind die Ausrichtung des content-divs. Bootstrap doku: https://getbootstrap.com/docs/4.0/utilities/flex/#align-content

      • Legen Sie die Breite der divs in diesem container auf die Breite des Elternteils, der mit w-100

    • Weil die <p> fügt einen Rand an der Unterseite, blue div am
      endet, schließt nicht bündig mit dem schwarzen div. Ich fügte hinzu, die Klasse
      "mb-0", mit dem der Rand unten auf "0", so dass Sie sehen können, es funktioniert.

    Funktionieren sollte, ob die Rechte oder linke div ist der mit der größeren height-Eigenschaft.

    Edit: Hinzugefügt-Klassen für content-Ausrichtung.

    So einfach ist das!! Jedoch, es funktioniert nicht in diesem Fall: jsfiddle.net/huoaynb0/1
    Du hast Recht! Die div-Elemente in die richtige col nicht, richten Sie sich richtig auf Ihren eigenen. Bootstrap umfasst in diesem Fall auch Glück. Sie können es so funktionieren: jsfiddle.net/ydjds2ko

    InformationsquelleAutor programmiri

  3. 3

    Hier ist ein sehr einfaches Bootstrap nur Ansatz für diese. Sie brauchen keine zusätzliche CSS.

    https://www.codeply.com/go/J3BHCFT7lF

    <div class="container">
  <div class="row">
      <div class="col-8">
        <div class="black h-100">
          <p>Bar Graph or Line Graph</p>
        </div>
      </div>
      <div class="col-4 d-flex flex-column">
        <div class="red mb-2">
          <p>numbers</p>
        </div>
        <div class="purple mb-2">
          <p>numbers with more lines of content that wrap to the next line</p>
        </div>
        <div class="green mb-2">
          <p>numbers</p>
        </div>
        <div class="blue">
          <p>numbers</p>
        </div>
      </div>
  </div>
</div>

    Diese nutzt die Bootstrap-4 utility-Klassen, um die richtige Spalte zu füllen Höhe.

    Verwandte:

    bootstrap-4 Zeilen-Höhe

    InformationsquelleAutor Zim

Schreibe einen Kommentar