Question

我有一个表单，所有输入都在表td中设置，我在表格行中使用文本输入和bootstrap-select。

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

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

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

<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>

Answer 1

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

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

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

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

1 个答案: