Bootstrap 5-在网格显示中对齐内容

2022-08-26 00:00:00 css bootstrap-5

我有一个使用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中以网格布局显示内容,以满足ab的需求?


解决方案

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

相关文章