引导表不会填满容器的宽度 [英] Bootstrap table won't fill container width
问题描述
我正在使用引导程序(3.3.2)编写一个网站，其中一个页面上有一个简单的表.我只是在一个容器中有一个简单的标题面板，而在另一个包含标题和表的内容容器中.出于某种原因，文本会填充容器的宽度，但是左侧的表格会对齐，并且仅会覆盖其中的文本所需的宽度.有人有想法么?我知道我可以在表格中添加width ="100％"，但这应该是默认的引导行为...
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...
欢呼
<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类一起包装在具有.table-responsive类的包装器<div>中，如下所示:
It's because you are not following the Bootstrap documentation indications on responsive tables. You have to wrap your table element with .table class in a wrapper <div> with the .table-responsive class, like this:
<div class="table-responsive">
<table class="table">
...
</table>
</div>
这篇关于引导表不会填满容器的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
