Question

如何在不影响网格系统的情况下使表格可滚动？如何在不打扰col-xs标签的情况下使表格可滚动？

 <table class="col-xs-12">  
    <thead>
                            <th class="col-xs-2">A</th>
                            <th class="col-xs-1">B</th>
                            <th class="col-xs-1">c</th>
                            <th class="col-xs-2">d</th>
                            <th class="col-xs-2">e</th>
                            <th class="col-xs-1">f</th>
                            <th class="col-xs-1">g</th>
                            <th class="col-xs-1">h</th>
                            <th class="col-xs-1">i</th>
                          </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>
                                <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>
                                <td><input type="text" class="form-control"></td>
                              </tr>
                          </tbody>
                        </table>

Answer 1

表格是否需要在所有屏幕尺寸上滚动？

如果您只是需要它来滚动小型设备，您可以使用bootstrap的.table-responsive类

http://getbootstrap.com/css/#tables-responsive

Answer 2

您是否尝试使用类table-responsive将一个表格包装在div中并将col-xs-12更改为table或最差row？我有一段时间没有使用过Bootstrap，如果我错了就很抱歉。

如果您考虑垂直滚动，那么，也许是表格容器的固定高度（让它为div）和overflow: scroll？

使Bootstrap表可滚动而不影响网格系统

2 个答案: