Question

这是一个JS Bin链接：http://jsbin.com/qiziyupo/4/edit?output

响应表不会收缩以适合面板。我该如何解决这个问题？

编辑：我正在寻找一种解决方案，其中响应表将调整大小以适应面板内部，而不必使面板更大。

Answer 1

.table-responsive课程仅针对移动设备做出响应......

来自Bootstrap 3.1.1文档......

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

但您可以在没有媒体查询的情况下将该类添加到您的css中，并在任何视口中获取功能。

但请注意，这不会缩小表格，它只会给出一个水平滚动条...

以下是Bootstrap中的.table-responsive类，没有媒体查询将其限制为768px及以下。

.table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    overflow-x: scroll;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #ddd;
    -webkit-overflow-scrolling: touch;
}

.table-responsive>.table { 
    margin-bottom: 0;
}

.table-responsive>.table>thead>tr>th, 
.table-responsive>.table>tbody>tr>th, 
.table-responsive>.table>tfoot>tr>th, 
.table-responsive>.table>thead>tr>td, 
.table-responsive>.table>tbody>tr>td, 
.table-responsive>.table>tfoot>tr>td {
    white-space: nowrap;
}

.table-bordered还有一些我没有包含的CSS规则......

Answer 2

Type

只需在面板主体中为表格水平滚动编写。

Answer 3

最好不要使用面板体，将表放在面板标签内，不要使用面板体

Answer 4

这发生了，因为Panel有这个类：

.col-md-3 {
    width: 25%;
}

强迫它的宽度。删除它，eveything就可以了： - ）

Answer 5

使用容器也会对它产生影响。如果您的布局没有固定布局，请使用container-fluid，.table类的响应性不会出现任何问题。

内置响应表的Bootstrap面板

5 个答案: