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

发布时间：2020-12-18 00:17:42 所属栏目：安全来源：网络整理

导读：我正在使用twitter bootstrap处理一个项目.我们有一个表有很多列,几乎每次都要比浏览器窗口大. 这是右图：表边框停留在浏览器窗口中,而表内容则不存在.如果我滚动,边框停留在它们的位置,他们不会“跟随”浏览器窗口. 您可以看到问题on this jsfiddle.它适用

我正在使用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;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!