如何获得不超过页面宽度 100% 的 bootstrap 4 flex 表？

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>

编辑：我意识到使用没有 Bootstrap 的 CSS 的普通 table 可能会做我想要的。

Answer 1

如果你想要 <table> 的行为，那就是你应该使用的。
Bootstrap 仅样式 <table>s 具有 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>

要让 Bootstrap 的 <table> 特定样式和使表格不拉伸其父级的整个宽度，您可以给表格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> 或其父对象的宽度。