Bootstrap:流体表对于窗口来说太宽了 [英] Bootstrap: fluid table too wide for window
问题描述
我正在使用 twitter bootstrap 进行一个项目.我们有一个包含很多列的表格，并且几乎每次都会比浏览器窗口大.
这是右边发生的事情:
表格边框保留在浏览器窗口中，而表格内容则没有.如果我滚动，边框会保持原样，它们不会跟随"浏览器窗口.
您可以在这个 jsfiddle 上看到问题.它适用于 Safari，不适用于 Chrome 或 Firefox.
布局是这样的:
<div class='container-fluid'>...这里的菜单边栏...<table class="table table-striped table-bordered" style="white-space: nowrap"><头><tr></tr></thead><tr></tr></tbody>我希望你能帮助我.如果您需要更多信息，请询问，我很乐意提供.
这是一个 Rails 3.2 应用，使用了 2.2.1.1 版本的 gem bootstrap-sass(2.2.2.0 也出现了这个问题).前三个数字反映引导程序版本.
解决方案 Bootstrap 将以下样式应用于表格:
table {最大宽度:100%；}
如果您在自定义样式表中覆盖该属性，它有望解决问题.将其更改为无"应该可以.
table {最大宽度:无；}
I'm working on a project using twitter bootstrap. We have a table that has lots of columns and is going to be larger than the browser window almost every time.
This is what happens on the right :
The table border stays in the browser window, while the table contents do not. If I scroll, the borders stay where they are, they do not "follow" the browser window.
You can see the problem on this jsfiddle. It works on Safari, not on Chrome or Firefox.
The layout is like this :
<body>
<div class='container-fluid'>
<div class='row-fluid'>
<div class='span1'>
... menusidebar here...
</div>
<div class='span11'>
<table class="table table-striped table-bordered" style="white-space: nowrap">
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
I hope you can help me. If you need more information, just ask, I'd be glad to supply.
This is a Rails 3.2 app, using the gem bootstrap-sass in version 2.2.1.1 (the problem appears in 2.2.2.0 too). The first three numbers reflect the bootstrap version.
解决方案 Bootstrap has the following style applied to Tables:
table {
max-width: 100%;
}
If you override that property in your custom stylesheet it should hopefully solve the problem. Changing it to 'none' should work.
table {
max-width: none;
}
这篇关于Bootstrap:流体表对于窗口来说太宽了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆