html - bootstrap 表中的输入宽度始终使用最大宽度

Question

好吧，我正在尝试制作一个带有输入字段的表格。要设置每个字段的大小，我知道我必须在标题中设置 col-size。

<thead>
    <tr>
        <th class="col-sm-2">Large</th>
        <th class="col-sm-2">Large</th>
        <th class="col-sm-1">Small</th>
        <th class="col-sm-2">Large</th>
        <th class="col-sm-1">Small</th>
        <th class="col-sm-2">Large</th>
        <th class="col-sm-2">Large</th>
    </tr>
</thead>

然而，无论列大小如何，输入都会扩展到最大宽度。

http://jsfiddle.net/m79HR/

这可能是对 Bootstrap 的不当使用，但我认为它是带有上述 header 的内联输入的最佳选择。

此外，假设我希望这个特定的网格有 18 列而不是默认的 12 列，在这种特殊情况下是否可能？

Answer 1

只需将“form-control”类添加到输入中，bootstrap 就会处理剩下的事情。

这样做可以更轻松地添加列或更改宽度，因为您只需更改标题而不是每一行/输入。

<table class="table table-condensed">
    <thead>
        <tr>
            <th class="col-sm-12 col-md-4">Large</th>
            <th class="col-sm-12 col-md-2">Small</th>
            <th class="col-sm-12 col-md-2">Small</th>
            <th class="col-sm-12 col-md-2">Small</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="text" class="form-control" />
            </td>
            <td>
                <input type="text" class="form-control" />
            </td>
            <td>
                <input type="text" class="form-control" />
            </td>
            <td>
                <input type="text" class="form-control" />
            </td>
        </tr>
    </tbody>
</table>