css - Bootstrap 中的列宽

Question

如果这是一个简单的问题，请耐心等待(我是一名尝试学习 CSS-Bootstrap 的 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">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="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>

但令我惊讶的是。第一列(计划)更大(而不是更小)，其他都保持不变:

我尝试在 header 和正文中设置(如上面的代码)并且仅在 header 中设置。结果是一样的。

Answer 1

首先，由于“container-fluid”，当您使用列时，第一个表项(计划)要大得多。只尝试“容器”。根据文档，“container-fluid”是全宽的，这意味着它正在扩展以填满屏幕。

接下来，列不是使表格元素宽度变小所需要的。

顶部布局是带有表格的列类。底部布局是没有列类的标准表格布局。如您所见，最小可能的列宽 (col-1) 大于表项的默认大小。如果你想要比它更小的东西(表格的默认大小)，那么你将不得不弄乱表格本身的大小。 (例如，将特定 td 元素的 padding-right 或 padding-left 设置为 0rem 有助于修剪多余的间距)

我的“列”表代码:

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

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