使用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

Answer 2

您错误地使用了offset-*类。它不应该是offset-*-12。试试这段代码。

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

        <div class="col-sm-2 offset-sm-4 text-right"><strong>Date due</strong></div>
        <div class="col-sm-2 offset-sm-4">11/28/2017</div>
    </div>
</div>