Css 引导中的列宽

如果这是一个简单的问题，请耐心听我说（我是一名试图学习CSS引导的iOS开发人员）

我首先玩的是排：

     <div class="row">
         <div class="col col-1">
          <p>Plan</p>
        </div>  
        <div class="col col-2">
          <p>Date</p>
        </div>
        <div class="col col-2">
          <p>Person</p>
        </div>
         <div class="col col-3">
          <p>Description</p>
        </div>  
        <div class="col col-1">
          <p>Time</p>
        </div>
        <div class="col col-3">
          <p>Line</p>
        </div>
      </div>

<div class="container-fluid">
            <table class="table">
                <thead>
                    <tr>
                        <th class="col col-1">Plan</th>
                        <th class="col col-2">Date</th>
                        <th class="col col-2">Person</th>
                        <th class="col col-3">Description</th>
                        <th class="col col-1">Time</th>
                        <th class="col col-3">Line</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="col col-1"> <input type="checkbox" name="Plan"> </td>
                        <td class="col col-2"> <input type="date" name="date"> </td>
                        <td class="col col-2"> <input type="text"></td>
                        <td class="col col-3"> <input type="text"></td>
                        <td class="col col-1"> <input type="time"></td>
                        <td class="col col-3"> <input type="text"></td>
                    </tr>
                         <tr>
                        <td  class="col col-1"> <input type="checkbox" name="Plan"> </td>
                        <td class="col col-2"> <input type="date" name="date"> </td>
                        <td class="col col-2"> <input type="text"></td>
                        <td class="col col-3"> <input type="text"></td>
                        <td class="col col-1"> <input type="time"></td>
                        <td class="col col-3"> <input type="text"></td>

                </tbody>
            </table>
        </div>

计划

日期

人

描述

时间

线

这是完美的：

然后，我尝试对表执行相同的操作，首先不设置网格的列：

    <div class="container-fluid">
        <table class="table">
            <thead>
                <tr>
                    <th">Plan</th>
                    <th">Date</th>
                    <th>Person</th>
                    <th>Description</th>
                    <th>Time</th>
                    <th>Line</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td> <input type="checkbox" name="Plan"> </td>
                    <td> <input type="date" name="date"> </td>
                    <td> <input type="text"></td>
                    <td> <input type="text"></td>
                    <td> <input type="time"></td>
                    <td> <input type="text"></td>
                </tr>
                     <tr>
                    <td> <input type="checkbox" name="Plan"> </td>
                    <td> <input type="date" name="date"> </td>
                    <td> <input type="text"></td>
                    <td> <input type="text"></td>
                    <td> <input type="time"></td>
                    <td> <input type="text"></td>

            </tbody>
        </table>
    </div>

日期
人
描述
时间
线

不错，但我希望某些列更小（计划、时间、日期），而其他列更大。因此，我为这些列添加了类（就像我在试验行时所做的那样：

     <div class="row">
         <div class="col col-1">
          <p>Plan</p>
        </div>  
        <div class="col col-2">
          <p>Date</p>
        </div>
        <div class="col col-2">
          <p>Person</p>
        </div>
         <div class="col col-3">
          <p>Description</p>
        </div>  
        <div class="col col-1">
          <p>Time</p>
        </div>
        <div class="col col-3">
          <p>Line</p>
        </div>
      </div>

<div class="container-fluid">
            <table class="table">
                <thead>
                    <tr>
                        <th class="col col-1">Plan</th>
                        <th class="col col-2">Date</th>
                        <th class="col col-2">Person</th>
                        <th class="col col-3">Description</th>
                        <th class="col col-1">Time</th>
                        <th class="col col-3">Line</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="col col-1"> <input type="checkbox" name="Plan"> </td>
                        <td class="col col-2"> <input type="date" name="date"> </td>
                        <td class="col col-2"> <input type="text"></td>
                        <td class="col col-3"> <input type="text"></td>
                        <td class="col col-1"> <input type="time"></td>
                        <td class="col col-3"> <input type="text"></td>
                    </tr>
                         <tr>
                        <td  class="col col-1"> <input type="checkbox" name="Plan"> </td>
                        <td class="col col-2"> <input type="date" name="date"> </td>
                        <td class="col col-2"> <input type="text"></td>
                        <td class="col col-3"> <input type="text"></td>
                        <td class="col col-1"> <input type="time"></td>
                        <td class="col col-3"> <input type="text"></td>

                </tbody>
            </table>
        </div>

计划
日期
人
描述
时间
线

但令我惊讶的是，第一列（计划）要大得多（而不是小得多），而另一列则保持不变：

---

我尝试在页眉和正文（如上面的代码）中设置，并且只在页眉中设置。结果是一样的。

首先，当您使用列时，第一个表项（计划）会因为“容器流体”而大得多。只尝试“容器”。根据文档，“容器流体”是全宽，这意味着它正在扩展以填充屏幕

接下来，列不是使表项宽度变小所需的

顶部布局带有表中的列类。底部布局是没有列类的标准表布局。如您所见，最小可能列宽（col-1）大于表项的默认大小。如果希望某个值小于该值（表的默认大小），然后您将不得不处理表格本身的大小调整。（例如，将特定td元素的右填充或左填充设置为0rem有助于修剪多余的间距）

“列”表的我的代码：

计划
日期
人
描述
时间
线

---

顺便说一句，我使用的是引导版本4 alpha 6。如果您使用的是较低版本的引导，请将所有“col xl-#”实例替换为“col lg-#”。最新的引导版本的最大尺寸为xl。

您介意分享您的CSS吗？您使用的是哪个版本的引导？我正在使用引导版本4 alpha 6。我将尽快对此进行测试（明天或周二，我会通知你的。已经谢谢了。