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ファイルには次の2行があります。

.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：10pxを最初のチェックボックスセレクターに移動すると、すべてが整列します。MacのCSSは、チェックボックスを並べるのにも最適でした。

Answer 2

これが私が試したものであり、それがあなたが望んでいたものだと思います

http://jsfiddle.net/xgKP4/