时间戳

首页 > 解决方案 > 似乎无法让主体内的容器 div 与 Bootstrap4 垂直居中对齐

twitter-bootstrap - 似乎无法让主体内的容器 div 与 Bootstrap4 垂直居中对齐

问题描述

我已经经历了关于同一主题的多个 Stack Overflow 问题，但是我根本无法让它发挥作用。我几乎尝试了以下问题中提到的所有解决方案，但似乎没有一个对我有用。

Bootstrap 4中的垂直对齐中心

Bootstrap 4中心垂直和水平对齐

这就是我的代码的样子

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        body {
            height: 100%;
        }

        .col {
            border: 1px solid red;
        }

        .row {
            height: 200px;
            border: 1px solid blue;
        }
    </style>

</head>

<body>

<div class="container h-100 align-items-center">
    <div class="jumbotron my-auto">
        <div class="row">
            <div class="col align-self-end">
                col1
            </div>
            <div class="col align-self-start">
                col2
            </div>
        </div>
        <div class="row align-items-center">
            <div class="col">
                col1
            </div>
            <div class="col">
                col2
            </div>
        </div>
    </div>
</div>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</body>
</html>

我在这里想念什么？

附件是我的页面外观截图。

在此处输入图像描述

我知道我可以使用属性将 div 定位在页面的中心，position但我很想知道是否可以仅使用 Bootstrap 来完成而不添加任何自定义 CSS。

标签： twitter-bootstrap

解决方案

一种解决方案是声明container要采用100vh（视口高度的 100%），然后您可以向其添加d-flex类，并jumbotron使用align-self-center.

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <title>Document</title>
  
  <style>
      .col {
          border: 1px solid red;
      }

      .row {
          height: 200px;
          border: 1px solid blue;
      }
      
      .my-container {
          height: 100vh;
      }
  </style>

</head>

<body>

<div class="container my-container d-flex">
  <div class="jumbotron w-100 align-self-center">

    <div class="row">
      <div class="col align-self-end">
        col1
      </div>
      <div class="col align-self-start">
        col2
      </div>
    </div>
    
    <div class="row align-items-center">
      <div class="col">
        col1
      </div>
      <div class="col">
        col2
      </div>
    </div>

  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

</body>
</html>

推荐阅读