html - 我们如何修复 iphone 设备上的自定义表格 ui？

Question

我在媒体查询的帮助下在响应式 View 上自定义了 Bootstrap 表，它在所有浏览器和所有 Android 手机上显示良好。但是当我检查 iPhone 上的页面时，我发现所有的表格 View 都坏了。

我使用下面的代码来自定义表格。

@media (max-width: 479px){
.opd_table table.manage_opd tr td, .opd_table table.manage_opd tr th {
    float: left;
    width: 100%!important;
    text-align: left;
}    
.opd_table table.manage_opd tr {
    padding: 20px 0 13px;
    display: inline-block;
    position: relative;
}    
}

http://i.imgur.com/j4h8A2y.png (这是预期的结果)

http://i.imgur.com/Px21h93.jpg (这是 iPhone 设备上损坏的 UI 结果)

Answer 1

您应该能够使用 Bootstrap 列获得预期的结果，请查看:Bootstrap columns .如果您是 Bootstrap 的新手，那么值得学习它，因为它可以使前端开发变得更加容易。