时间戳

首页 > 解决方案 > 使用带有弹性容器的 bootstrap 4 设计一些设计

html - 使用带有弹性容器的 bootstrap 4 设计一些设计

问题描述

我正在尝试设计如下布局： 在此处输入图像描述

描述：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
html {
  height: 100%;
}
body {
  min-height: 100%;
  background-color: blue;
}

.row-height100
{
  min-height: 100%;
}

</style>

</head>
<body class="d-flex">

<div class="flex-fill flex-row row-height100 justify-content-center">
<div class="flex-fill p-2 bg-success d-flex justify-content-center row-height100">
        <div>Flex item 1</div>
</div>
<div class="flex-fill p-2 bg-success d-flex justify-content-start row-height100">Flex item 2</div>
</div>


</body>
</html>

标签： htmlcssflexboxbootstrap-4

解决方案

  1. 将你的 body 或一个包裹元素的 div 元素更改为一个flexbox ，使用d-flex和 useh-100使 flexbox 全高。
  2. 并flex-fill让你的元素"A"和"B"元素共享并占据整个宽度的 50%。
  3. 也"A"可以"B"使用d-flex.
  4. "C"使用 . 将您和"D"元素的内容水平居中justify-content-center。
  5. 使用 .垂直居中对齐"C"元素的内容align-items-center。
  6. 使用垂直顶部对齐"D"元素的内容align-items-start。

检查并运行以下代码片段以获取我上面描述的实际示例：

/* CSS */

html, body {height: 100%;width: 100%;}
body {min-height: 100%;background-color: blue;}

/* ignore following two css properties. Added just for visual example's sake */
.flex-fill {border: 4px solid #000;}
.flex-fill div {border: 4px solid #000; background-color: #FFF; padding: 5px;}
<!-- Scripts -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<!-- HTML -->

<div class="d-flex h-100">
    <div class="flex-fill d-flex justify-content-center align-items-center bg-success">
      <div>Flex item 1</div>
    </div>
    <div class="flex-fill d-flex justify-content-center align-items-start bg-success">
      <div>Flex item 2</div>
    </div>
</div>

推荐阅读