我正在尝试设计如下布局:
描述:
- A 和 B 组件在整个页面上的宽度应为 50%，高度应为 100%。
- C 组件应水平和垂直居中。
- D 组件应位于顶部。
- A 包含 C。
- B 包含 D。
<!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>最佳答案
- 使用
d-flex更改您的 body 或将元素包裹到 flexbox 的 div 元素 并使用h-100使 flex 盒达到全高。 - 和
flex-fill到您的"A"和"B"元素，使它们共享并占据全宽度的 50%。 - 更改您的
"A"和"B"也可以使用d-flex将 元素添加到 Flexbox 中。 - 将您的
"C"水平居中 和"D"元素的内容使用justify-content-center。 - 垂直居中对齐
"C"元素的内容使用align-items-center。 - 垂直顶部对齐
"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>关于html - 使用 Bootstrap 4 和 Flex-Container 进行一些设计，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54851868/