html – Bootstrap表不会填充容器宽度

发布时间：2020-12-14 21:22:34 所属栏目：资源来源：网络整理

导读：我正在使用bootstrap(3.3.2)编写一个网站,其中一个页面上有一个简单的表格.我只在一个容器中有一个简单的标题面板,另一个包含标题和表的内容容器.由于某种原因,文本填充容器的宽度,但左边的表格对齐并且仅跨越文本所需的宽度.有人有主意吗？我知道我可以在表

我正在使用bootstrap(3.3.2)编写一个网站,其中一个页面上有一个简单的表格.我只在一个容器中有一个简单的标题面板,另一个包含标题和表的内容容器.由于某种原因,文本填充容器的宽度,但左边的表格对齐并且仅跨越文本所需的宽度.有人有主意吗？我知道我可以在表中添加width =“100％”,但这应该是默认的bootstrap行为…

干杯

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

解决方法

这是因为你没有关注 Bootstrap documentation indications.你必须在包装器中使用.table类包装你的table元素< div>使用.table-responsive类,如下所示：

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

（编辑：李大同）

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