Bootstrap 5-在网格显示中对齐内容 [英] Bootstrap 5 - Aligning content in a Grid display

问题描述

我有一个使用Bootstrap 5的应用程序。在该应用程序中，我需要布局一些内容，如下所示：

+----------------------+-----------------------------------------------+
| Assignment Begins On | [date picker goes here]                       |
+----------------------+-----------------------------------------------+
|         v            |                                               |
+----------------------+-----------------------------------------------+
|    Continues For     | [slider that fills remaining width goes here] |
+----------------------+-----------------------------------------------+

第一列的大小需要相同，内容居中。第二列需要填充剩余的宽度。根据我的理解，我应该使用d-grid，因为我尝试使用行和列来布局对象。但是，列大小不应均匀调整。相反，它们应该基于a)第一栏的内容和b)父栏中可用的空间。这让我觉得我应该改用d-flex。但是，如果我使用d-flex，我就不能满足a的要求。因此，我又恢复使用d-grid。但现在，我不能将内容放在第一列的中心，因为这两列的大小不同。我目前拥有：

<div class="d-grid">
  <div class="row">
    <div class="col-auto text-center" style="background-color:yellow;">Assignment Begins On</div>
    <div class="col">[date picker]</div>
  </div>

  <div class="row">
    <div class="col-auto text-center" style="background-color:orange;">v</div>
  </div>

  <div class="row">
    <div class="col-auto text-center" style="background-color:red;">Continues For</div>
    <div class="col">[slider]</div>
  </div>
</div>

我添加了background-color详细信息，以显示列的大小不同。如何在Bootstrap 5中以网格布局显示内容，以满足a和b的需求？

推荐答案

ASexplained here，这个问题没有简单的解决方案。我推荐使用css网格。它只需要一点额外的css...

HTML

    <div class="d-grid gap-2">
        <div class="col text-center text-nowrap" style="background-color:yellow;">Assignment Begins On</div>
        <div class="col"> Date picker</div>
        <div class="col text-center" style="background-color:orange;">v</div>
        <div class="col"></div>
        <div class="col text-center text-nowrap" style="background-color:red;">Continues For</div>
        <div class="col"> Slider </div>
    </div>

css

.d-grid {
  grid-template-columns: 0fr 1fr;
}

Codeply

这篇关于Bootstrap 5-在网格显示中对齐内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！