twitter-bootstrap 表的 Bootstrap3 响应不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18585804/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap3 responsiveness for table is not working
提问by sulthana
<div class="table-responsive">
<table class="table">
...
</table>
</div>
This code block is not resulting in responsive table in Bootstrap. Please help me in achieving the responsive table using bootstrap. Thanks in advance
此代码块不会在 Bootstrap 中生成响应表。请帮助我使用引导程序实现响应式表。提前致谢
回答by Fizer Khan
Following Responsive table will works only <768px.
以下响应表仅适用<768px。
<div class="table-responsive">
<table class="table">
</table>
</div>
Because bootstrap 3has following code
因为bootstrap 3有以下代码
@media (max-width: 767px) {
.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;
}
}
If you want responsive table for display >768px, then you can overwrite it in your css without media query just like this
如果您想要显示响应式表>768px，那么您可以在没有媒体查询的情况下在 css 中覆盖它，就像这样
.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;
}
回答by Shina
I know the documentation says so which I have asked .table-responsive doesn't work in div above the table but adding it to the table class works... Do the following and your issue should be solved.
我知道文档是这样说的，我已经问过.table-responsive 在表格上方的 div 中不起作用，但将其添加到表格类中是有效的......执行以下操作，您的问题应该得到解决。
Not working:
不工作：
<div class="table-responsive">
<table class="table">
......
</table>
</div>
Works:
作品：
<table class="table table-responsive">
......
</table>
回答by Omar
I dont see why the following would not work... Make sure you are not setting widths or heights... post the full HTML.
我不明白为什么以下不起作用......确保你没有设置宽度或高度......发布完整的HTML。
<div class="table-responsive">
<table class="table">
...
</table>
</div>
[bootstrap3]
[引导程序3]
回答by Henry Weber
Fizer Khan's answer on this page is correct. Just to add to it though, so that you only apply this when you absolutely want it in devices >768px, I'd recommend you create a custom CSS style in your own CSS file called something like:
Fizer Khan 在此页面上的回答是正确的。只是为了添加它，以便您仅在设备>768px 绝对需要它时才应用它，我建议您在自己的 CSS 文件中创建一个自定义 CSS 样式，名为：
.table-responsive-force {
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;
}
Then you can just use it whenever you want to actually override Bootstrap's default behaviour.
然后，只要您想实际覆盖 Bootstrap 的默认行为，就可以使用它。
回答by Bosko
You probably didn't set the width to outer (wrapping) div (or section). Adding 'width: 100%' to outer element might solve the issue.
您可能没有将宽度设置为外部（环绕）div（或部分）。将 'width: 100%' 添加到外部元素可能会解决问题。
