Bootstrap 4 - Выравнивание текста в макете карточки

Question

У меня есть следующий макет, который создает "Возраст: 36" в одной строке вместе,

<div class="card-body">
    <h5 class="card-title header_big text-capitalize"> example's Profile</h5>
    <p class="card-text">
        Age: <span class="font-weight-bold">36</span>
    </p>
</div>

Я хочу выделить его как полную таблицу шириной 100% с ячейками, составляющими 50% -50%, но без использования таблиц.

<table style="width:100%">
    <tr>
        <td style="width:50%">Age</td>
        <td style="width:50%">36</td>
    </tr>
</table>

Как лучше всего это сделать?

Answer 1

Самое простое решение - использовать строку с 2 столбцами

<div class="card-body">
    <h5 class="card-title header_big text-capitalize">Example's Profile</h5>
    <div class="row">
        <div class="col">
            Age:
        </div>
        <div class="col">
            <span class="font-weight-bold">36</span>
        </div>
    </div>
</div>

https://getbootstrap.com/docs/4.1/layout/grid/#auto -layout-columns

---

Другое решение могло бы используйте flex. Недостатком является то, что вам нужно вручную задать отступы или поля для двух столбцов.

<div class="d-flex">
    <div class="flex-fill">
        Age:
    </div>
    <div class="flex-fill">
        <span class="font-weight-bold">36</span>
    </div>
</div>

https://getbootstrap.com/docs/4.1/utilities/flex/

Answer 2

В качестве альтернативы вы можете использовать версию библиотеки-agnosti c flexbox.

HTML:

<div class="container">
  <div class="col">
    Age
  </div>
  <div class="col">
    36
  </div>
</div>

CSS:

.container {
  display: flex;
}

.col {
  display: flex;
  width: 50%;
}

Answer 3

Думаю, вы ищете это решение:

<div class="container">
    <div class="row">
        <div class="col">Age</div>
        <div class="col">36</div>
    </div>
</div>

Answer 4

См. Этот пример

.card-text-custom {
  display:flex;
  justify-content: space-between;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<div class="card">
  <div class="card-header">Header</div>
  <div class="card-body">
      <h5 class="card-title header_big text-capitalize"> example's Profile</h5>
      <p class="card-text card-text-custom">
          <span> Age:</span> <span class="font-weight-bold">36</span>
      </p>
  </div>
  <div class="card-footer">Footer</div>
</div>

Однако вы также можете использовать сетку bootstrap.

Answer 5

Думаю, на вашем месте я бы предпочел разместить классы col-md-6 в соответствующих полях. Это должно удовлетворить потребность.

 <div class="row">
  <div class="col-6">
   Age
  </div>
 <div class="col-6">
   36
 </div>
</div>