Bootstrap 如何强制弯曲容器中的行在引导5中垂直居中

o75abkj4 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(1)|浏览(168)

我有一个bootstrap 5容器，它需要保存一个动态的项目网格，这些项目最终将成为小部件。每个小部件的大小都相同。我需要每个小部件的内容在小部件本身的垂直和水平方向上居中。我使用一行来允许小部件数量的动态增长（每个小部件都有固定的高度）。
到目前为止，它几乎已经完成并在工作，但我不知道如何使行在父容器中垂直居中。我研究并尝试了StackExchange上提出的许多解决方案，但似乎没有一个在这种情况下工作。
当前版本：

<div class="container shadow min-vh-100 py-2">
    <div class="my-auto">
        <div class="row d-flex justify-content-center w-100">
            <div class="col-3 btn-outline-primary m-1 d-flex align-items-center" style="height:300px; border: 5px solid red;">
                <div class="mx-auto"> Widget </div>
            </div>
            <div class="col-3 btn-outline-primary m-1 d-flex align-items-center" style="height:300px; border: 5px solid red;">
                <div class="mx-auto"> Widget </div>
            </div>
            <div class="col-3 btn-outline-primary m-1 d-flex align-items-center" style="height:300px; border: 5px solid red;">
                <div class="mx-auto"> Widget </div>
            </div>
            <div class="col-3 btn-outline-primary m-1 d-flex align-items-center" style="height:300px; border: 5px solid red;">
                <div class="mx-auto"> Widget </div>
            </div>
            <div class="col-3 btn-outline-primary m-1 d-flex align-items-center" style="height:300px; border: 5px solid red;">
                <div class="mx-auto"> Widget </div>
            </div>
            <div class="col-3 btn-outline-primary m-1 d-flex align-items-center" style="height:300px; border: 5px solid red;">
                <div class="mx-auto"> Widget </div>
            </div>
        </div>
    </div>
</div>

如何使容器中的行在容器中垂直居中？
请点击此处：https://www.codeply.com/p/0Kg0YjFHEz

twitter-bootstrap

来源：https://stackoverflow.com/questions/74620140/how-to-force-row-in-container-that-is-flex-to-center-vertically-in-bootstrap-5

1条答案

按热度按时间

9udxz4iz1#

问题是由min-vh-100引起的。请将其更改为vh-100，并将align-items-center h-100添加到row。
请参阅下面的片段。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

<div class="container shadow vh-100 py-2">
  <div class="row d-flex justify-content-center align-items-center h-100">
    <div class="col-3 btn-outline-primary m-1 d-flex align-items-center" style="height:300px; border: 5px solid red;">
      <div class="mx-auto"> Widget </div>
    </div>
    <div class="col-3 btn-outline-primary m-1 d-flex align-items-center" style="height:300px; border: 5px solid red;">
      <div class="mx-auto"> Widget </div>
    </div>
    <div class="col-3 btn-outline-primary m-1 d-flex align-items-center" style="height:300px; border: 5px solid red;">
      <div class="mx-auto"> Widget </div>
    </div>
    <div class="col-3 btn-outline-primary m-1 d-flex align-items-center" style="height:300px; border: 5px solid red;">
      <div class="mx-auto"> Widget </div>
    </div>
    <div class="col-3 btn-outline-primary m-1 d-flex align-items-center" style="height:300px; border: 5px solid red;">
      <div class="mx-auto"> Widget </div>
    </div>
    <div class="col-3 btn-outline-primary m-1 d-flex align-items-center" style="height:300px; border: 5px solid red;">
      <div class="mx-auto"> Widget </div>
    </div>
  </div>
</div>

赞(0）回复(0）举报 2022-12-07

我来回答

Bootstrap 如何强制弯曲容器中的行在引导5中垂直居中

1条答案

相关问题

热门标签

最新问答