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

原学程将引见Bootstrap 五-在网格显示中对于齐实质的处置办法,这篇学程是从其余处所瞅到的,而后减了1些海外法式员的疑问与解问,愿望能对于您有所赞助,佳了,上面开端进修吧。

Bootstrap 5-在网格显示中对齐内容 教程 第1张

成绩描写

我有1个应用Bootstrap 五的运用法式。在该运用法式中,我须要结构1些实质,以下所示:

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

第1列的年夜小须要雷同,实质居中。第两列须要填充残剩的严度。依据我的懂得,我应当应用d-grid,由于我测验考试应用言以及列去结构对于象。然则,列年夜小不该平均调剂。相反,它们应当鉴于a)第1栏的实质以及b)女栏中可用的空间。这让我认为我应当改用d-flex。然则,假如我应用d-flex,我便不克不及知足a的请求。是以,我又复原应用d-grid。但是如今,我不克不及将实质搁在第1列的中间,由于这二列的年夜小分歧。我今朝具有:

<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 五中以网格结构显示实质,以知足a以及b的需供?

推举谜底

ASexplained here,这个成绩出有简略的处理计划。我推举应用css网格。它只须要1面额定的css...

HTML

 <div class="d-grid gap⑵">
  <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 一fr;
}

Codeply

佳了闭于Bootstrap 五-在网格显示中对于齐实质的学程便到这里便停止了,愿望趣模板源码网找到的这篇技巧文章能赞助到年夜野,更多技巧学程不妨在站内搜刮。