Question

虚假问题的借口。我需要使用twitter bootstrap创建3个流体列布局。第一列是页面宽度的45％，第二是10％第三个应该是页面宽度的45％。

我试过这个：

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span5">
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>2</td>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td colspan="2">Larry the Bird</td>
                    <td>@twitter</td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="span2"></div>
        <div class="span5">
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>2</td>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td colspan="2">Larry the Bird</td>
                    <td>@twitter</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

但是中间栏太宽，不是屏幕宽度的10％。请帮我在twitter bootstrap中获得流畅布局的想法。

Answer 1

在具有12列流体布局的Twitter Bootstrap中，span2具有width: 14.5299%而span5具有width: 40.1709%。

这是将介质宽度分成12列及其排水沟的结果。

如果您需要不同的发布，可以在此处自定义您的布局：http://twitter.github.com/bootstrap/customize.html

Answer 2

如果您需要该比率，只需将BS网格系统从12列更改为20列。然后使用span9，span2，span9。

但这不会达到45/10/45百分比。由于BS有排水沟......

twitter bootstrap流体布局3列

2 个答案: