Bootstrap 4-align-items- *类根本不起作用 [英] Bootstrap 4 - align-items-* class not working at all

问题描述

我目前正在使用Bootstrap 4框架构建网站.我注意到我无法正确对齐项目.

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

示例:

Bootstrap 4官方文档行定位

我的行定位

根据文档的代码:

    <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>

在类似的问题中，建议将min-height属性放在父类上，但这并不能解决我的问题.

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.

感谢您的宝贵时间.

推荐答案

那些div的父代又称为div.row，没有高度，它的高度由它的内容(即您要垂直对齐的div的内容)定义.这些div没有足够的空间可以对齐.

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.

可以看到粉红色背景，即div.row，其最小高度为10rm.

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.

请参见下面的图片

基本上，您需要使物体在垂直空间中移动的高度.

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

简单示例

.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>

这篇关于Bootstrap 4-align-items- *类根本不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！