4

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

最终，我试图设计一个有点流畅的布局，它也有可以扩展但有最小尺寸的表格。关于哪种布局（来自引导程序）可以实现这一点的任何其他建议也会有所帮助。

谢谢！

4

1 回答 1

1

下面的代码将完成您想要实现的目标：

 <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>

对于您问题的后半部分，很难说，因为它取决于确切的要求，但是是的，您可以尝试单列流体布局..如果用户浏览紧凑的屏幕尺寸，那么您必须考虑响应式设计..

于 2012-11-20T10:05:44.307 回答