html - 将列内容与 Bootstrap 4 对齐

Question

我正在尝试使用 bootstrap 对齐一些行和列，以使我的 html 显示类似这样的内容....

我试过使用这样的代码...

<div class="container"> 
<div class="row">
  <div class="col-sm-2"><span><strong>Data</strong></span></div>
  <div class="col-sm-1">Information</div>

  <div class="col-sm-2 offset-sm-12"><strong>Date due</strong></div>
  <div class="col-sm-1 offset-sm-12">11/28/2017</div>      
</div>

但我无法正确对齐。谁能帮我把第一行的对齐方式与图片的对齐方式有些相似？

Answer 1

您可以使用text-right对齐列中的文本。使用 offset 将移动列，但不会对齐列中的内容。

https://www.codeply.com/go/vxOqKdz0D4

<div class="container">
    <div class="row">
        <div class="col-sm-3 text-right"><span><strong>Data</strong></span></div>
        <div class="col-sm-2">Information</div>
        <div class="col-sm-3 text-right"><strong>Date due</strong></div>
        <div class="col-sm-2">11/28/2017</div>
    </div>
</div>

阅读Bootstrap text alignment docs