twitter-bootstrap – Bootstrap:窗口的表格太宽

我正在使用twitter bootstrap处理一个项目.我们有一个表有很多列,几乎每次都要比浏览器窗口大.

这是右图:

表边框停留在浏览器窗口中,而表内容则不存在.如果我滚动,边框停留在它们的位置,他们不会“跟随”浏览器窗口.

您可以看到问题on this jsfiddle.它适用于Safari,而不是Chrome或Firefox.

布局是这样的:

<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>

我希望你能帮助我.如果您需要更多信息,请问,我很乐意提供.

这是一个Rails 3.2应用程序,在2.2.1.1版本中使用gem bootstrap-sass(问题也出现在2.2.2.0中).前三个数字反映了引导版本.

解决方法

Bootstrap具有以下样式应用于表:
table {
    max-width: 100%;
}

如果您在自定义样式表中覆盖该属性,则应该希望解决问题.将其更改为“自动”应该工作.

table {
    max-width: none;
}

相关文章

BootStrapValidator可以用于完成基于BootStrap搭建的前端UI中的输入验证,由于本插件完全基于BootStrap...
顶求网首页是一个web2.0博客类的网站首页,在该网站中用户可以发表博客,也可以推荐图书给其他用户。所...
一直想改版网站首页的图书展示部分,以前的展示是使用BootStrap的传统的collapse,网页篇幅占用大,也不...
在视窗足够大的时候是没有任何问题的,但是当拖动改变视窗的大小后会发现布局又变乱了,这个问题困扰了...
BootStrap中的tabs控件以其简单易用而很受广大开发者的欢迎。但是,它的样式比较单一,如何才能在其原有...
BootStrap是基于HTML、CSS和JavaScript的框架,使你只需要写简单的代码就可以很快的搭建一个还不错的前...