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