Twitterのブートストラップでこれらのフォーム要素間の左右のマージンを制御するCSSは何ですか？

Question

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

編集： 私はこれらの余白を変更する方法を知っていますが、なぜそれらの間に余裕がありますか？私はブートストラップにCSSを見つけることができず、その間にこれらの3または4pxマージンを担当しています。ここで

Answer 1

は..あなたが必要とする

マージンCSSセレクタです入力/フィールド：

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

：チェックボックス/ラジオボタンため

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

マージン送信ボタンのマージン：それがデフォルトであるため、全体のインラインフォーム

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

そして、あなたの質問に答えるための

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

証拠金は、現在の要素間のマージンがあります。それらを削除したい場合は、上記で指定したCSSコントロールに負のマージンを追加して手動で行うことをお勧めします。あなたが入力間の余白を削除したい場合は、次の操作を行います。

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

Answer 2

は、フォーム入力後にもっと余裕を置く例えば

<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> 

のために必要なHTMLコードを見てフィールド、次のことができます。同様に

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にあります。あなたがファイヤーバグやクロムのchromebugを使って調べると、次のようなスタイルが表示されます：.bs-example {margin: 0 -15px 15px;}。これは、2つの個別の入力フィールドの間のスペースを制御する部分です。あなたが火のバグやクロムのバグを使ってそれをブロックすると、フィールドが実際に他のものの下に横たわっていることがわかり、vertical-alignポジションと一緒にこのマージンが得られ、両方のポジションが維持されます。

Answer 4

ブートストラップのドキュメントの入力間のスペースは、HTMLの空白のためです。 .form-groupは空白に敏感なインラインブロックに設定されています。デモンストレーションのために

、あなたは次のようないくつかのCSSでそれを修正することができますhttp://jsfiddle.net/kvcrawford/Rs54Q/1/

を参照してください。

.form-inline-space-fix .form-group { 
    margin-right: 4px; 
} 
.form-inline-space-fix .form-group:last-child { 
    margin-right: 0; 
}