Как получить bootstrap 4 flex table, который не распространяется на 100% ширины страницы?

Question

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

aaa   bb   ccc ddd 
aaaaa bbbb c   dd

Когда я пытаюсь использовать Bootstrap 4 * .row и .col, я получаю нужное форматирование таблицы, но затем таблица растягивает текст100% ширины страницы.Как я могу получить вышеуказанное форматирование?

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div style="font-family: Consolas;">
   <div class="d-flex p-2">
      <div>aaa&nbsp;</div>
      <div>bb&nbsp;</div>
      <div>ccc&nbsp;</div>
      <div>ddd&nbsp;</div>
   </div>
   <div class="d-flex p-2">
      <div>aaaaa&nbsp;</div>
      <div>bbbb&nbsp;</div>
      <div>c&nbsp;</div>
      <div>dd&nbsp;</div>
   </div>
</div>

РЕДАКТИРОВАТЬ: я понимаю, что использование обычного table без CSS Bootstrap может сделать то, что я хочу.

Answer 1

Если вам нужно поведение <table>, это то, что вы должны использовать.
Начальные загрузки только стилей <table> с классом table, чтобы разрешить использование <table> s для любых других целей:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<table>
  <tbody>
    <tr>
      <td>aaa&nbsp;</td>
      <td>bb&nbsp;</td>
      <td>ccc&nbsp;</td>
      <td>ddd&nbsp;</td>
    </tr>
    <tr>
      <td>aaaaa&nbsp;</td>
      <td>bbbb&nbsp;</td>
      <td>c&nbsp;</td>
      <td>dd&nbsp;</td>
    </tr>
  </tbody>
</table>

Чтобы иметь <table> специфический стиль Bootstrap и сделать стол не растянуть весьШирина родительского элемента вы можете указать в таблице width: auto:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table" style="width: auto">
  <tbody>
    <tr>
      <td>aaa&nbsp;</td>
      <td>bb&nbsp;</td>
      <td>ccc&nbsp;</td>
      <td>ddd&nbsp;</td>
    </tr>
    <tr>
      <td>aaaaa&nbsp;</td>
      <td>bbbb&nbsp;</td>
      <td>c&nbsp;</td>
      <td>dd&nbsp;</td>
    </tr>
  </tbody>
</table>

Вы также можете положиться на систему сетки Bootstrap, чтобы ограничить ширину <table> или его родителя.