引导表列宽度操作

Question

我一直在尝试使用Bootstrap CSS更改表的列宽，但最终却很沮丧。任何帮助将不胜感激！

<div class="container mb-3">
    <table class="table table-responsive-sm">
        <th>
            Group Number:
        </th>
        <th>
            Group Name:
        </th>
        <th>
            Remarks:
        </th>
        <tr v-for="group in groups">
            <td>
                <input type="number" class="msf_input" v-model.number="group.group_number">
            </td>
            <td>
                <input type="text" class="msf_input" v-model="group.group_name">
            </td>
            <td>
                <input type="text" class="msf_input" v-model="group.remarks">
            </td>
        </tr>
    </table>
</div>

使用此代码，我以3个偶数列结尾。我的目标是第一列较小，第二列较大，第三列中等。

当我在所有上都应用class =“ col”时，它给了我非常大的第一列，以及2个甚至很小的列。

当我首先应用class =“ col-1”，第二应用class =“ col-6”和第三应用class =“ col-4”时，结果与仅使用class =“ col”没什么区别

如何应用可在引导表中使用的col-6或col-3？

感谢您的帮助。