使用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%的倍数。

Answer 2

尝试对每个th元素使用style="width:30%"或10%。

点击此处了解更多信息：Bootstrap - how to set up fixed width for ?