我正在使用 Twitter bootstrap 并试图让两个表对齐。我开始认为我的做法是错误的。我有两张表，一张有 3 列，一张有 2 列。我已将 3 列表设置为 span6、span2、span4。我已将 2 列表设置为 span6 和 span6。根据页面宽度，它们似乎并不总是在中间对齐。有什么办法可以做到这一点？
例子: http://jsfiddle.net/PSBtr/
<html>
<head><link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet"></head>
<body>
<table class="table table-bordered table-condensed">
<thead>
<tr>
<th class="span6">fdsafdfdf f dfdafs sd</th>
<th class="span2">tesaaat</th>
<th class="span4">ffdsfsd d</th>
</tr>
</thead>
</table>
<table class="table table-bordered table-condensed">
<thead>
<tr>
<th class="span6" >fdfdf fds f </th>
<th class="span6">test</th>
</tr>
</thead>
</table>
</body>
</html>
最终，我尝试设计一种稍微流畅的布局，其中的表格也可以展开但尺寸最小。关于哪种布局(来自 Bootstrap )可以完成此操作的任何其他建议也会有所帮助。
谢谢!
最佳答案
下面的代码将完成您想要实现的目标:
<table class="table table-bordered table-condensed">
<thead>
<tr class="span12">
<th class="span6">fdsafdfdf f dfdafs sd</th>
<th class="span2">tesaaat</th>
<th class="span4">ffdsfsd d</th>
</tr>
</thead>
</table>
<table class="table table-bordered table-condensed">
<thead>
<tr class="span12">
<th class="span6">fdfdf fds f </th>
<th class="span6">test</th>
</tr>
</thead>
</table>
对于您问题的后半部分，很难说，因为这取决于确切的要求，但是可以，您可以尝试单列 Fluid layout ..如果用户浏览紧凑的屏幕尺寸，那么您必须考虑 Responsive design ..
关于html - 推特 Bootstrap 表对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13463804/