Выравнивание содержимого столбца с помощью Bootstrap 4

Question

Я пытаюсь выровнять некоторые строки и столбцы с помощью начальной загрузки, чтобы мой 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

Вы использовали класс 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>

Answer 2

Вы можете выровнять текст в столбцах с 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 для выравнивания текста