首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Bootstrap 4- align-items-*类根本不工作

Bootstrap 4- align-items-*类根本不工作
EN

Stack Overflow用户
提问于 2018-06-04 07:35:57
回答 2查看 14.6K关注 0票数 2

我目前正在建立一个Bootstrap 4框架的网站。我发现我不能正确地对齐项目。

示例:

Bootstrap 4 official documentation row positioning

My row positioning

根据文档编写代码:

代码语言:javascript
复制
    <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属性放在父类中,但这并没有解决我的问题。

我知道这可能是个愚蠢的问题,但我是新手。

谢谢您抽时间见我。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-06-04 07:50:21

这些div的父类,也就是div.row没有高度,它的高度是由它的内容定义的,也就是你试图垂直对齐的那些div,因此没有空间让这些div像它们应该的那样对齐。

正如你可能已经注意到的,他们有一个特殊的例子,你可以看到粉红色的背景,也就是div.row,它的最小高度是10rm。

见下图

基本上,你需要一个高度来让东西在垂直空间中移动。

简单示例

代码语言:javascript
复制
.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;
}
代码语言:javascript
复制
<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>

票数 9
EN

Stack Overflow用户

发布于 2018-06-04 07:46:16

我已经answered this question了。

垂直中心是相对于高度的。在您的示例中,所有兄弟列的高度都相同,因此您不会看到对齐方式的任何变化。.row需要有一个定义的高度,或者在列中放置一些内容以使行具有更多的高度……

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

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50671922

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档