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>

然而，输入会扩展到最大宽度，而不考虑col-size。

http://jsfiddle.net/m79HR/

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

另外，假设我希望这个特定的网格有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>

Answer 2

您需要将平面col-md-*用于平板电脑屏幕的col-sm-*和用于移动设备屏幕的col-xs-*，对于较大的屏幕，还需要col-lg-*，您可以将所有这些类都使它具有响应性，如：

<div class="row">
    <div class="col-sm-12">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>Very Small</th>
                    <th>Very Small</th>
                    <th>Very Small</th>
                    <th>Large</th>
                    <th>Small</th>
                    <th>Medium</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="col-sm-1">
                        <input class="col-sm-12" placeholder="col-sm-1" />
                    </td>
                    <td class="col-sm-1">
                        <input class="col-sm-12" placeholder="col-sm-1" />
                    </td>
                    <td class="col-sm-1">
                        <input class="col-sm-12" placeholder="col-sm-1" />
                    </td>
                    <td class="col-sm-4">
                        <input class="col-sm-12" placeholder="col-sm-4" />
                    </td>
                    <td class="col-sm-2">
                        <input class="col-sm-12" placeholder="col-sm-2" />
                    </td>
                    <td class="col-sm-3">
                        <input class="col-sm-12" placeholder="col-sm-3" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Answer 3

对于Bootstrap 4，您需要另外将deviceready类添加到行https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file/

d-flex

引导表中的输入宽度始终使用最大宽度

3 个答案: