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

【问题标题】：Input width in bootstrap table always using max width引导表中的输入宽度始终使用最大宽度
【发布时间】：2014-03-10 15:20:45
【问题描述】：

好的，我正在尝试使用输入字段制作表格。要设置每个字段的大小，我知道我必须在标题中设置 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 列，这可能只是在这种特殊情况下吗？

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

你确定吗？因为它首先是移动设备，所以如果没有特别提及，我认为col-sm-2 将适用于更大的一切。在小提琴中试一试jsfiddle.net/m79HR/1我没有发现任何变化。
尝试在<div class='row'> <div class='col-sm-12'> your table </div> </div>中添加您的代码
bootply.com/113024#点击手机图标或显示器图标，最小化/最大化屏幕并检查。
列的大小仍然相同。您只是减小了输入的大小（我想要），但由于列大小，我希望它发生。
然后将这些类添加到标签中。

【解决方案3】：

对于 Bootstrap 4，您需要另外将 d-flex 类添加到行中，like

<table>
  <thead>
    <tr class="d-flex">
      <th class="col-3">3 columns wide header</th>
      <th class="col-sm-5">5 columns wide header</th>
      <th class="col-sm-4">4 columns wide header</th>
    </tr>
  </thead>
  <tbody>
    <tr class="d-flex">
      <td class="col-3">3 columns wide content</th>
      <td class="col-sm-5">5 columns wide content</th>
      <td class="col-sm-4">4 columns wide content</th>
    </tr>
  </tbody>
</table>

【讨论】：