对齐模态弹出窗口中的复选框

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/