我正在学习Bootstrap,我似乎被最基本的东西之一--列的垂直对齐所困住了.我试图让自己的内容与最高层保持一致,但失败得很惨.

我重写了我的代码多次,但没有结果.我只用Bootstrap文档中的代码开始了一个新的html文档,但所有内容仍然与文档的顶部对齐.我错过了什么吗?

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
  <title>Document</title>
</head>

<body>
  <div class="container text-center">
    <div class="row align-items-end">
      <div class="col">
        should be bottom - One of three columns
      </div>
      <div class="col">
        One of three columns
      </div>
      <div class="col">
        One of three columns
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>

</html>

推荐答案

你要找的是Bootstrap的align-items-start-class.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
  <title>Document</title>
</head>

<body>
  <div class="container text-center vh-100">
    <div class="row align-items-center h-100">
      <div class="col">
        should be bottom - One of three columns
      </div>
      <div class="col">
        One of three columns
      </div>
      <div class="col">
        One of three columns
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>

</html>

Html相关问答推荐

卡片上方的文本

通过POST方法提交html表单时CSV文件无法通过(在使用Django的上下文中)

在悬停时应用文本装饰

如何在排序上重用参数?

如何使不断增长的div不溢出其包含固定div的父级

将精选选项的价格合并为一个价格HTML、PHP和JQuery

为什么一个 CSS 网格框比其他网格框低?

Swift WkMessageHandler 消息不发送

为什么带有截断的 contentedible div 在受约束时会在 Chrome 中添加空格

网格项未在同一行上对齐

如何检测输入字段是否没有必填且没有占位符?

如何使用javascript在jsx中重复插入特殊字符?

如何使我的设计适合与我的框架尺寸不同的视口?

如何将图像移动到父容器的右侧?

涉及短代码时如何在页面上定位元素?

隐藏在标题后面的下拉菜单

尽管设置了 width:100% left:0,但居中对齐的 CSS 动画并不对称

我的卡片内容无法在 bootstrap 5 中正确居中

如何使用 html 和 css 添加超链接功能

如何在 about:blank 网站上设置页面标题