Bootstrap 4 - align-items-* class not working at a

问题:

This question already has an answer here:

• Bootstrap vertical align property not working 1 answer

I am currently building a website with Bootstrap 4 framework. I noticed that I can't align items properly.

Example:

Bootstrap 4 official documentation row positioning

My row positioning

Code according to the docs:

    <div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

In similar questions the advice was to put min-height property on the parent class , but that did not fixed my problem.

I know that probably, this is a dumb question , but I'm newbie in bootstrap.

Thank you for your time.

回答1:

The parent of those div aka the div.row has no height, it's height is defined by it's content aka those divs you're trying to align vertically, therefore there's no space for those div to be aligned as they should be.

as you may have notice in that particularly example they have, you can see the pink background, that is the div.row and it have a min-height of 10rm.

see picture below

Basically you need a height for things to move in the vertical space.

Simple example

.row {
  height: 5em;
  border: 1px solid;
  margin: 10px 0;
  background-color: orange;
}

.container>.row>div:nth-child(1) {
  background-color: red;
}

.container>.row>div:nth-child(2) {
  background-color: blue;
}

.container>.row>div:nth-child(3) {
  background-color: brown;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">


<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

回答2:

I've already answered this question.

Vertical center is relative to height. In your example, all of the sibling columns are the same height so you're not going to see any variation in alignment. Either the .row needs to have a defined height, or put some content in the columns that causes the row to have more height...

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