引导表不会填充容器宽度答案

【问题标题】：Bootstrap table won't fill container width引导表不会填充容器宽度
【发布时间】：2015-04-05 00:31:55
【问题描述】：

我正在使用 bootstrap (3.3.2) 编写一个网站，其中一个页面上有一个简单的表格。我在一个容器中只有一个简单的标题面板，另一个带有标题和表格的内容容器。出于某种原因，文本填充了容器的宽度，但表格左对齐并且仅跨越其中文本所需的宽度。谁有想法？我知道我可以在表格中添加一个 width="100%" ，但这应该是默认的引导行为...

干杯

<html>
  <head>
    <title>Page title</title>
    <link type="text/css" rel="stylesheet" href="bootstrap.min.css">
  </head>
  <body>

    <div class="navbar navbar-inverse navbar-static-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="index.html">Home</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse" >
          <ul class="nav navbar-nav">
            <li><a class="navbar-brand" href="modules.html">Modules</a></li>
            <li><a class="navbar-brand" href="sites.html">Sites</a></li>
            <li><a class="navbar-brand" href="search.html">Search</a></li>
          </ul>
        </div>
      </div>
    </div>

    <div class="container">
      <div class="page-header">
        <h2>Why won't the table align!?</h2>
      </div>

      <div class="table-responsive">
        <table>
          <thead>
            <th>Head1</th><th>Head2</th><th>Head3</th>
          </thead>
          <tbody>
            <tr>
              <td>Body1</td><td>Body2</td><td>Body3</td>
            </tr>
            <tr>
              <td>Body1</td><td>Body2</td><td>Body3</td>
            </tr>
            <tr>
              <td>Body1</td><td>Body2</td><td>Body3</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </body>
</html>

【问题讨论】：

将类'table table-responsive'添加到table标签中，并将table-header中的标签包装到标签中！

标签： html twitter-bootstrap

【解决方案1】：

这是因为您没有遵循 responsive tables 上的引导文档说明。您必须使用 .table 类将 table 元素包装在带有 .table-responsive 类的包装器 <div> 中，如下所示：

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

【讨论】：

我该死！ ...我肯定不是每次都那样做吗？？
这个答案不正确。根据getbootstrap.com/css/#tables 的文档，需要将表响应类放置到包装表的父级上。
...
@somecallitblues 这个答案很老了，在写这篇文章的时候，我会更新它。

【解决方案2】：

注意：如果您使用的是 bootstrap v4 alpha，即使 documentation 说您可以使用：

<table class="table table-responsive">
  ...
</table>

我仍然必须使用公认的答案来填充容器的宽度：

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

【讨论】：

【解决方案3】：

接受的答案不正确。根据文档

通过在 .table-responsive 中包装任何 .table 来创建响应式表格，以使它们在小型设备（768 像素以下）上水平滚动。在宽度大于 768 像素的任何东西上查看时，您不会发现这些表格有任何区别。

然后继续展示正确的用法

<div class="table-responsive">
   <table class="table">
     ...
   </table>
</div>

<table> 上还应该有 .table 类

http://getbootstrap.com/css/#tables-responsive

【讨论】：

【解决方案4】：

这个解决方案对我有用：

只需在表格元素中添加另一个类：w-100 d-block d-md-table

应该是：<table class="table table-responsive w-100 d-block d-md-table">

对于 bootstrap 4 w-100 将宽度设置为 100% d-block（显示：块）和 d-md-table（显示：最小宽度的表格：576px）

<div class="table table-responsive w-100 d-block d-md-table">
<table class="table">
 ---
</table>
</div>

【讨论】：

【解决方案5】：

尝试将引导类“table”添加到标签中。

    <table class="table">
      <thead>
        <th>Head1</th><th>Head2</th><th>Head3</th>
      </thead>
      <tbody>
        <tr>
          <td>Body1</td><td>Body2</td><td>Body3</td>
        </tr>
        <tr>
          <td>Body1</td><td>Body2</td><td>Body3</td>
        </tr>
        <tr>
          <td>Body1</td><td>Body2</td><td>Body3</td>
        </tr>
      </tbody>
    </table>

【讨论】：

【解决方案6】：

如果容器很大，即使响应式表格也不会扩展以适应容器。没有 Boostrap 表配置可以实现这一点。

如果你想使用 Bootstrap 类，最简单的方法是添加w-100。否则，请使用单列 grid layout。

【讨论】：

如果表格的内容小于容器宽度，并且表格响应类已被删除，则此方法有效。

【解决方案7】：

而不是使用：

<div class="table-responsive">

你应该使用：

<table class="table table-responsive">

JSFiddle

【讨论】：

【解决方案8】：

用最简单的话！！

通过将任何.table 包装在.table-responsive 中来创建响应式表使它们在小型设备上水平滚动（在768px 下）。什么时候查看任何大于768px 宽的东西，您将看不到任何这些表的区别。

因此，对于您的要求，.table 和 .table-responsive 将为您提供帮助。

【讨论】：