css - Twitter Bootstrap でこれらのフォーム要素間の左右のマージンを制御する CSS は?

Question

これらのインライン フォーム要素間のマージンを制御するものを理解できません。たとえば、2 つのテキスト入力フィールド間の余白です。

編集：これらのマージンを変更する方法は知っていますが、現時点でそれらの間にマージンがあるのはなぜですか。現時点では、これらの間の 3 ピクセルまたは 4 ピクセルのマージンを担当する CSS をブートストラップで見つけることができません。

Answer 1

必要な CSS セレクターは次のとおりです。

入力/フィールドをマージン:

.form-inline .form-group {
    margin: 0px 10px; /* Add something like this */
}

チェックボックス/ラジオボタンの余白:

.form-inline .radio, .form-inline .checkbox {
    margin: 0px 10px; /* Add something like this */
}

送信ボタンのマージン:

.bs-example > .btn, .bs-example > .btn-group {
    margin: 0px 10px; /* Add something like this */
}

インラインフォーム全体のマージン

.bs-example {
    margin: 0px 30px; /* Add something like this */
}

あなたの質問に答えるために、現在、要素間に余白があります。これがデフォルトであるためです。それらを削除したい場合は、上記で指定した CSS コントロールに負のマージンを追加して、手動で削除することをお勧めします。たとえば、入力間のマージンを削除する場合は、次のようにします。

.form-inline .form-group {
    margin: 0px -3px; /* Add a negative margin to remove it*/
}

Answer 2

フォームに必要なHTMLコードを監視する

<form class="form-inline" role="form">
    <div class="form-group">
        <label class="sr-only" for="exampleInputEmail2">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail2"
        placeholder="Enter email">
    </div>
    <div class="form-group">
        <label class="sr-only" for="exampleInputPassword2">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword2"
        placeholder="Password">
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox">Remember me</label>
    </div>
    <button type="submit" class="btn btn-default">Sign in</button>
</form>

たとえば、入力フィールドの後にマージンを追加するには、次のことができます。

form.form-inline div.form-group {
 margin-right: 10px;
}

同様に、他の要素に対しても同じトリックを行うことができます (例: チェックボックスform.form-inline div.checkbox、送信ボタンform.form-inline button) 。

Answer 3

私はあなたが混乱していることを理解しています。2 つの入力フィールド間にギャップがある理由を知りたいとします。

その答えは、実際には親フォーム クラスにありbs-example form-inlineます。firebug または chrome の chromebug を使用して調べると、次のようなスタイルが表示されます.bs-example {margin: 0 -15px 15px;}。これは、2 つの個別の入力フィールド間のスペースを制御する部分です。fire bug または chrome bug を使用してそれをブロックすると、フィールドが実際に上下に配置されていることがわかります。このマージンとvertical-align配置により、両方が所定の位置に保持されます。