html - Bootstrap チェックボックスの入力を垂直方向に揃える

Question

Bootstrap バージョン 2.3.2 を使用して、下の画像のようなフォーム レイアウトがあり、チェックボックスにインライン ラベルがあるため、位置合わせの問題があります。

margin を追加するとinput[type="checkbox"]、インライン ラベルではなく、チェックボックスにのみマージンが与えられます。チェックボックスとそのラベルがその隣のテキスト フィールドに垂直に整列するようにするにはどうすればよいですか?

興味のある方は、 JS BINをご覧ください。

Answer 1

HTMLに、チェックボックスのマージンを処理するクラスを追加します。

 <div class="container-fluid">
  <div class="row-fluid">
    <div class="span3">
      <label>label 1</label>
      <input type="text" />
    </div>
    <div class="span3">
      <label>label 2</label>
      <input type="text" />
    </div>
    <div class="span3 checkbox">
        <input type="checkbox" />test description
    </div>
  </div>
</div>

そしてあなたのCSSで：

input[type="checkbox"] {
 // i just remove this part..
}
.checkbox {
  margin: 30px 0 0 0;
}

チェックボックスではなく、親 div にマージンを設定します。このjsFiddleを確認してください。

お役に立てれば

Answer 2

常に次のようなものを使用するようにしてください。

<div class="span3">
    <label for="checkbox" class="checkbox">
        <input type="checkbox" id="checkbox" class="checkbox">test description
    </label>
</div>

http://jsbin.com/itAdAWA/1/edit

Answer 3

<label>このようにチェックボックスの前に a を入れてみてはどうでしょうか。..

<div class="container-fluid">
    <div class="row-fluid">
      <div class="span3">
        <label>label 1</label>
        <input type="text">
      </div>
      <div class="span3">
        <label>label 2</label>
        <input type="text">
      </div>
      <div class="span3">
        <label>test</label>
        <input type="checkbox">
      </div>
    </div>
  </div>

ブートプライ: http://bootply.com/86998

Answer 4

理想的な解決策ではありませんが、コードを次のように変更してください...

<div class="span5">
    <input type="checkbox">test description</input>
  </div>

その上にmargin-topを設定します。私はあなたが望むように結果を出します - より良いです。