web-dev-qa-db-ja.com

Bootstrapラベルテキストのないチェックボックスのフォーム水平垂直配置

今朝、Bootstrap 3.0.0から3.2.0に変更しました。これは、Webアプリケーションにいくつかの新機能が必要だったためです。 .form-horizontalフォームのチェックボックスの配置。

例は http://www.bootply.com/AYN64feYze にあります。この最小限の例のマークアップは次のとおりです。

<div class="form-horizontal">
    <div class="form-group">
      <label class="col-sm-2 control-label">With label text</label>
          <div class="col-sm-10">
            <div class="checkbox">
              <label>
                  <input type="checkbox"> label text
              </label>
            </div>
          </div>
    </div>
  <div class="form-group">
      <label class="col-sm-2 control-label">Without label text</label>
          <div class="col-sm-10">
            <div class="checkbox">
              <label>
                  <input type="checkbox">
              </label>
            </div>
          </div>
    </div>
</div>

チェックボックスに次のテキストがない場合、チェックボックスは表示されるはずの行の下に移動します。

この問題の解決策はありますか？私はすでに先頭のラベルを持っているので、チェックボックスに次のテキストは必要ありません。現在の回避策は、<label>を含む<input type="checkbox">にテキストを追加し、フォントの色として背景色を使用してテキストを非表示にすることです。

ご協力ありがとうございました。

htmlcsstwitter-bootstrapcheckboxvertical-alignment
8
Thylossus

これが残りのフォームレイアウトに影響するかどうかはわかりませんが、<label>（現在inline-blockに設定）の表示属性を次のように変更すると、問題は解決するようです。

label{
    display:inline;
}

これが 更新されたBootply です。お役に立てれば！ご不明な点がありましたらお知らせください。

7
Serlite

これは私のために働きました：

<div class="form-group">
    <div class="col-lg-3">
        <label class="pull-right" for="MyCheckBox">My Checkbox</label>
    </div>
    <div class="col-lg-9">
        <input type="checkbox" name="MyCheckBox">
    </div>
</div>

まず、<div class='checkbox'>要素を削除する必要がありました。次に、チェックボックスのラベル要素に次の変更を加えました。

  1. ラベルを独自の列に配置しますdiv <div class="col-lg-3"></div>
  2. Class = "control-label"を削除します
  3. Class = "pull-right"を追加します。

最終的に、他の入力と水平に、ラベルを垂直に揃えたチェックボックスができました。

3
Nathan Agersea

チェックボックスの次のテキストが必要ない場合は、チェックボックスを囲んでいる<label>を削除しないでください。そのようです。

<div class="form-horizontal">
    <div class="form-group">
      <label class="col-sm-2 control-label" for="check1">With label text</label>
          <div class="col-sm-10">
            <div class="checkbox">
                  <input type="checkbox" id="check1">
            </div>
          </div>
    </div>
  <div class="form-group">
      <label class="col-sm-2 control-label" for="check2">Without label text</label>
          <div class="col-sm-10">
            <div class="checkbox">
                  <input type="checkbox" id="check2">
            </div>
          </div>
    </div>
</div>

私が試したところ、このコードはBootplyで機能するように見えました。

また、スクリーンリーダーにfor属性を使用してユーザーが使いやすくするためのラベルがあるかどうかを覚えておいてください（チェックボックスの代わりにラベルをクリックするだけです）。

0
Rob Quincey