Html Bootstrap 表不会填充容器宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28339119/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap table won't fill container width
提问by radpotato
I'm writing a web site using bootstrap (3.3.2) with a simple table on one of the pages. I just have a simple header panel in one container, and another content container with a title and table. For some reason, text fills the width of the container, but the table left aligns and only spans the width required by the text within. Anyone have any ideas? I know I can add in a width="100%" to the table, but this should be default bootstrap behaviour...
我正在使用引导程序（3.3.2）编写一个网站，其中一个页面上有一个简单的表格。我在一个容器中只有一个简单的标题面板，在另一个带有标题和表格的内容容器中。出于某种原因，文本填充了容器的宽度，但表格左对齐并且仅跨越其中的文本所需的宽度。谁有想法？我知道我可以在表格中添加一个 width="100%" ，但这应该是默认的引导行为......
Cheers
干杯
<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>
回答by Guillaume
It's because you are not following the Bootstrap documentation indications on responsive tables. You have to wrap your tableelement with .tableclass in a wrapper <div>with the .table-responsiveclass, like this:
这是因为您没有遵循响应式表上的 Bootstrap 文档指示。您必须table使用.table类将元素包装<div>在.table-responsive类的包装器中，如下所示：
<div class="table-responsive">
<table class="table">
...
</table>
</div>
回答by GuilPejon
NOTE: If you're using bootstrap v4 alpha, even though the documentationsays that you can use:
注意：如果您使用的是 bootstrap v4 alpha，即使文档说您可以使用：
<table class="table table-responsive">
...
</table>
I still had to use the accepted answer to make it fill the container's width:
我仍然必须使用接受的答案来填充容器的宽度：
<div class="table-responsive">
<table class="table">
...
</table>
</div>
回答by dbinott
The accepted answer is incorrect. Per the docs
接受的答案是不正确的。根据文档
Create responsive tables by wrappingany .table in .table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.
通过将任何 .table包装在 .table-responsive 中来创建响应式表格，使它们在小型设备（768px 以下）上水平滚动。在宽度大于 768 像素的任何物体上查看时，您不会在这些表格中看到任何差异。
Then goes on to show proper usage
然后继续显示正确的用法
<div class="table-responsive">
<table class="table">
...
</table>
</div>
You should also have the .tableclass on the <table>
你也应该在.table课程上<table>
回答by Philipp Dahse
Try to add bootstraps class "table" to the tag.
尝试将引导程序类“表”添加到标签中。
<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>
回答by atastrumf
回答by Junaid
In most simple words !!
用最简单的话来说！！
Create responsive tables by wrapping any
.tablein.table-responsiveto make them scroll horizontally on small devices (under768px). When viewing on anything larger than768pxwide, you will not see any difference in these tables.
通过包装任何响应创建的表
.table中.table-responsive，使他们在小型设备上（下水平滚动768px）。在任何大于768px宽度的物体上查看时，您将看不到这些表格的任何差异。
So for your requirement .tableand .table-responsivewill help you.
因此，对于您的要求.table，.table-responsive将帮助您。
回答by OrangeDog
Even responsive tables do not expand to fit the container if the container is large. There is no Boostrap table configuration to make that happen.
如果容器很大，即使是响应式表也不会扩展以适应容器。没有 Boostrap 表配置来实现这一点。
The simplest way, if you want to use Bootstrap classes, is to add w-100.
Otherwise, use a single-column grid layout.
