html - 使用 Bootstrap 的表格列宽

Question

这是我在 StackOverflow 中的第一个问题，因为这是我第一次找不到可以帮助我解决问题的答案。
我正在尝试为带有 Bootstrap 的菜单制作一个表格。我希望早餐、午餐和晚餐栏的宽度各为 30%，碳水化合物、脂肪和蛋白质栏的宽度为 10%，但我做不到。
我通读了 the documentation实际上发现了一个非常相似的问题here .但是，我仍然无法使其工作。 我把我的代码 here in CodePen这样您就可以看到我所看到的。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<table class="table table-bordered">
  <thead>
    <tr class="m-0">
      <th class="w-10">#</th>
      <th class="w-30">Breakfast</th>
      <th class="w-30">Lunch</th>
      <th class="w-30">Dinner</th>
    </tr>
  </thead>
  <tbody>
    <tr class="m-0">
      <th scope="row" class="w-10">Carbohydrates</th>
      <td class="w-30">-
      </td>
      <td class="w-30">
        -
      </td>
      <td class="w-30">-
      </td>
    </tr>
    <tr class="m-0">
      <th scope="row" class="w-10">Fat</th>
      <td class="w-30">-
      </td>
      <td class="w-30">
        -
      </td>
      <td class="w-30">-
      </td>
    </tr>
    <tr class="m-0">
      <th scope="row" class="w-10">Proteins</th>
      <td class="w-30">-
      </td>
      <td class="w-30">
        -
      </td>
      <td class="w-30">-
      </td>
    </tr>
  </tbody>
</table>

谁能帮我找出我遗漏的东西？我刚刚自学编码大约 3 个月，并于上周开始使用 bootstrap，所以我希望这不是很明显的事情。
提前致谢!

Answer 1

你需要提供CSS规则

table .w-10 { width:10%; }
table .w-30 { width:30%; }

请注意，Bootstrap 确实带有 some predefined width classes ，但仅限于 25% 的倍数。