css - 在模式弹出窗口中对齐复选框

Question

我正在使用Twitter Bootstrap，它几乎是无痛的。但是，在模式弹出窗口中使用内联复选框时，我遇到了以下问题：

复选框的第一行未正确对齐。

请注意，如果我删除内联属性，这将继续：

违规代码如下：

<div class="modal-body">
    <form class="form-horizontal">

        <div class="row-fluid">

            <div class="span4">

                <h4 style="display:inline !important;">Client: </h4> 

            </div>

            <div class="span4">

                <h4 style="display:inline !important;">Start Date: </h4> 

            </div>

            <div class="span4">

                <h4 style="display:inline !important;">End Date: </h4> 

            </div>

        </div>

        <br />

        <div class="row-fluid">

            <div class="span12">

                <h4 style="display:inline !important;">Industry: </h4> TBA

            </div>

        </div>

        <br />

        <div class="row-fluid">

            <h4>Role: </h4>

            <label class="checkbox inline">

                <input type="checkbox" value="2"> .NET Developer

            </label>

            <label class="checkbox inline">

                <input type="checkbox" value="1"> Business Analyst

            </label>

            <label class="checkbox inline">

                <input type="checkbox" value="14"> Change Manager

            </label>

            *SNIP*
        </div>

        <br />

        <div class="row-fluid">

            <div class="span12">

                <h4>Scope of Work (max. 150 words): </h4>

                <textarea class="bdBox" rows="3"></textarea>

            </div>

        </div>

        <br />

        <div class="row-fluid">

            <div class="span12">

                <h4>Deliverables (max. 150 words): </h4>

                <textarea class="bdBox" rows="3"></textarea>

            </div>

        </div>

    </form>
</div>

为简洁起见缩短。

有没有人对此有任何想法，或者我应该把它带到 Bootstrap 问题列表中吗？

Answer 1

想通了。

bootstrap.css 文件中有两行：

.radio.inline,.checkbox.inline{display:inline-block;padding-top:5px;margin-bottom:0;vertical-align:middle;}
.radio.inline+.radio.inline,.checkbox.inline+.checkbox.inline{margin-left:10px;}

底线仅将 margin-left 应用于除第一个以外的复选框，这意味着第一个未被推过弄乱了行。

如果我将 margin-left:10px 移动到第一个复选框选择器中，一切都会排成一行。Mac 的 CSS 也非常适合排列我的复选框：

Answer 2

这是我尝试过的东西，我想这就是你想要的

http://jsfiddle.net/xgKP4/