gpt4 book ai didi

html - 使用 bootstrap 4 和 flex-containers 设计一些设计

转载 作者:行者123 更新时间:2023-11-27 22:57:21 26 4
gpt4 key购买 nike

我正在尝试设计如下布局: enter image description here

描述:

  • 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>

最佳答案

  1. 使用 d-flex 将您的正文或将元素包装到 flexbox 中的 div 元素更改为 flexbox 并使用 h-100 使 flexbox 全高。
  2. flex-fill 到您的 "A" "B" 元素,使它们共享并占据全宽的 50%。
  3. 改变你的 "A" "B" 元素也可以使用 d-flex 到 flexbox .
  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>

关于html - 使用 bootstrap 4 和 flex-containers 设计一些设计,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54851868/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com