我正在使用 Twitter Bootstrap CSS 创建一个响应式表格,它在桌面上看起来很正常,但在移动设备上是水平滚动的。
你可以在这里看到:
http://www.bonhard.com/nastodolci/penzion/ceny/
我使用的 CSS 是这样的:
@media (max-width: 767px) {
.table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #ddd;
}
.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-responsive > .table-bordered {
border: 0;
}
.table-responsive > .table-bordered > thead > tr > th:first-child,
.table-responsive > .table-bordered > tbody > tr > th:first-child,
.table-responsive > .table-bordered > tfoot > tr > th:first-child,
.table-responsive > .table-bordered > thead > tr > td:first-child,
.table-responsive > .table-bordered > tbody > tr > td:first-child,
.table-responsive > .table-bordered > tfoot > tr > td:first-child {
border-left: 0;
}
.table-responsive > .table-bordered > thead > tr > th:last-child,
.table-responsive > .table-bordered > tbody > tr > th:last-child,
.table-responsive > .table-bordered > tfoot > tr > th:last-child,
.table-responsive > .table-bordered > thead > tr > td:last-child,
.table-responsive > .table-bordered > tbody > tr > td:last-child,
.table-responsive > .table-bordered > tfoot > tr > td:last-child {
border-right: 0;
}
.table-responsive > .table-bordered > tbody > tr:last-child > th,
.table-responsive > .table-bordered > tfoot > tr:last-child > th,
.table-responsive > .table-bordered > tbody > tr:last-child > td,
.table-responsive > .table-bordered > tfoot > tr:last-child > td {
border-bottom: 0;
}
}
现在这在桌面和移动设备上都可以正常工作。但是在平板电脑上显示很有趣。将窗口大小调整为 1024x768 进行检查
您知道我是否可以调整媒体查询值以使其在平板电脑上的行为与在移动设备上的行为相同吗?
非常感谢!
菲尔
最佳答案
添加另一个 @media (max-width: 1024px) {}
??以 1024px 响应
关于html - 在平板电脑上查看使用 Twitter Bootstrap 的 CSS 响应表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21775178/