twitter bootstrap 流体布局 3 列答案

【问题标题】：twitter bootstrap fluid layout 3 columnstwitter bootstrap 流体布局 3 列
【发布时间】：2013-07-15 17:52:20
【问题描述】：

请假问题。我需要使用 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 中流畅布局的理念。

【问题讨论】：

标签： html twitter-bootstrap fluid-layout

【解决方案1】：

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

这是将媒体宽度分成 12 列及其装订线的结果。

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

【讨论】：

我看过这个页面，但我不明白如何在 45/10/45 打破这些列。我打开了生成的 bootstrap.css 文件，看到了 .spanXX 宽度的硬编码像素值
固定布局有像素值，流动布局有百分比值。
对不起，我好像很笨。 twitter.github.com/bootstrap/customize.html#components - 默认情况下在列宽的变量中固定 px 值。我必须输入 45% 而不是整数吗？
不，首先找到适合您需要的列、装订线和列数的百分比值（这是困难的阶段，数学的东西）。然后，您可以选择与百分比保持相同比率的任何像素值。

【解决方案2】：

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

但这不会完全达到 45/10/45%。由于BS有排水沟......

【讨论】：