gpt4 book ai didi

css - 将 div 置于 Bootstrap 4 中心并在其中使用行的最佳实践

转载 作者:太空宇宙 更新时间:2023-11-04 07:25:13 24 4
gpt4 key购买 nike

我在Bootstrap 4中练习,我不知道我违反了响应式设计的什么规则。我正在寻找执行图像的最佳实践。我的想法是学习。

enter image description here

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />

<body>
<div class="container-fluid h-100" style="border: solid red 1px">
<div class="row h-100 d-flex justify-content-center align-items-center contenedor_centrado">
<div class="col-6">
<div class="row">
<div class="col-12 border">
1
</div>
<div class="col-12 border">
2
</div>
</div>
</div>
<div class="col-6 border">
3
</div>
<div class="row">
<div class="col-6 border">4</div>
<div class="col-6 border">5</div>
</div>
</div>
</div>
</body>

最佳答案

只有类的解决方案。

my-auto class to the inner block will place it in the center.

还有一个问题:

您必须使用 height:100vh; 拉伸(stretch)外部容器,使其拉伸(stretch)到屏幕大小。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<div class="d-flex flex-column" style="height:100vh; border:5px solid red;">
<div class="d-flex flex-column my-auto" style="border: solid blue 1px">
<div class="row">
<div class="col-6">
<div class="row">
<div class="col-12 border">
1
</div>
<div class="col-12 border">
2
</div>
</div>
</div>
<div class="col-6 border">
3
</div>
</div>
<div class="row">
<div class="col-6 border">4</div>
<div class="col-6 border">5</div>
</div>
</div>
</div>

关于css - 将 div 置于 Bootstrap 4 中心并在其中使用行的最佳实践,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49962325/

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