我在Bootstrap 4中练习，我不知道我违反了响应式设计的什么规则。我正在寻找执行图像的最佳实践。我的想法是学习。
<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-autoclass 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/