引导表不会填充容器宽度

我正在使用 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>
115356 次浏览
小开
最佳答案

这是因为您没有遵循 响应表上的 Bootstrap 文档说明。您必须用 .table类包装 table元素，使用 .table-responsive类包装 <div>，如下所示:

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

不使用:

<div class="table-responsive">

你应使用:

<table class="table table-responsive">

JSFiddle

小开

用最简单的语言! ！

通过在 .table-responsive中包装任意 .table来创建响应表 使它们在小型设备上水平滚动(在 768px下) 观看任何大于 768px的宽度，你不会看到任何 这些表格的不同之处。

因此，对于你的要求 .table和 .table-responsive将帮助你。

小开

尝试将引导类“ 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>
小开

根据文件，被接受的答案是不正确的

通过 包装任意创建响应表。就位。桌面响应，使他们在小型设备上水平滚动(768px 以下)。当查看任何大于768px 宽度的内容时，您将不会看到这些表中的任何差异。

然后继续展示正确的用法

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

您还应该在 <table>上安装 .table类

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

小开

注意: 如果您正在使用 bootstrap v4alpha，即使 文件说您可以使用:

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

我仍然不得不使用公认的答案来填充容器的宽度:

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

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

如果您想使用 Bootstrap 类，最简单的方法是添加 w-100。 否则，使用单列 网格布局。

小开

这个方法对我很有效:

只需在表元素中添加另一个类: 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>

提交答案