使用Bootstrap表格列宽

Question

这是我在StackOverflow中的第一个问题,因为这是我第一次找不到帮助我解决问题的答案.
我正在尝试为带有引导程序的菜单创建一个表.我希望早餐,午餐和晚餐的每列宽度为30%,而且要说碳水化合物,脂肪和蛋白质10%,但我不能让它起作用.
我阅读了文档,实际上在这里发现了一个非常相似的静态.但是,我仍然无法使其发挥作用.我把我的代码放在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确实带有一些预定义的宽度类,但仅限于25%的倍数.