表格列大小中的文本输入减少答案

【问题标题】：Text input in table column size gets reduced表格列大小中的文本输入减少
【发布时间】：2016-05-04 23:06:52
【问题描述】：

我有一个表格，所有输入都设置在表格 td 内，我在表格行中使用文本输入和引导选择。

系统中所有输入均以正常分辨率正常显示。

当我以较低的分辨率或缩放查看文本输入时，文本输入的显示大小会减小，但引导选择不会缩小到标题文本或选项文本之外，并且保持不变。表格行宽也保持不变，即它试图适应屏幕宽度，而不是通过滚动超出屏幕宽度来扩展。

我希望文本输入不会减小显示大小。以下是我的代码，请帮助解决这个问题。

<div class="span6">
<table id="target-tables"
    class="table table-responsive table-striped table-bordered table-hover no-margin no-border"> 
    <thead>
        <tr>

            <th class="no-border" >Title1</th>
            <th class="no-border" >Title2</th>
            <th class="no-border" >Title3</th>
            <th class="no-border" >Title4</th>
            <th class="no-border" >Title5</th>
            <th class="no-border" >Title6</th>
            <th class="no-border" >Title7</th>
            <th class="no-border" >Title8</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div class="col-xs-12 nopadding">
                    <select class="selectpicker form-element" title='Select a database' >   
                        <option value=".....">......</option>
                    </select>
                </div>
            </td>

            <td>
                <div class="col-xs-12 nopadding">
                    <input type="text" class="form-element form-control input-md"/>
                </div>
            </td>

            <td>
                <div class="col-xs-12 nopadding">
                    <select class="selectpicker form-element" multiple title="........." >
                        <option value="......">.....</option>
                    </select>
                </div>
            </td>

            <td>
                <div class="col-xs-12 nopadding">
                    <input type="text" class="form-element form-control input-md" />
                </div>
            </td>

            <td>
                <div class="col-xs-12 nopadding">
                    <input type="text" class="form-element form-control input-md" />
                </div>
            </td>

            <td>
                <div class="col-xs-12 nopadding">
                    <input type="text" class="form-element form-control input-md" />
                </div>
            </td>

            <td>
                <div class="col-xs-12 nopadding">
                    <select class="selectpicker form-element" title="........." >
                        <option value="...">........</option>
                    </select>
                </div>
            </td>
            <td>
                <div class="col-xs-12 nopadding">
                    <select class="selectpicker form-element" >
                        <option value="......">........</option>
                    </select>
                </div>
            </td>
        </tr>
    </tbody>
    </table>

【问题讨论】：

标签： html css twitter-bootstrap-3

【解决方案1】：

根据 Bootstrap 的文档，您的 .table 需要嵌套在 .table-responsive 类中：

响应式表格通过包装任何 .table 来创建响应式表格 .table-responsive 使它们在小型设备上水平滚动（低于 768 像素）。在任何大于 768 像素宽的东西上查看时，您在这些表格中不会看到任何差异。

.table-responsive 与 .table 位于同一元素中。

【讨论】：