css - Twitter Bootstrap - インライン チェックボックスの配置の問題

Question

これを理解しようとして夢中になっています。次の行に折り返されるチェックボックスを正しく左揃えにすることができないようです。

サンプルコードは次のとおりです。

<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> Aaaaaaaaaa
</label>
<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> Bbbbbbb
</label>
<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> Cccccccccccccc
</label>
<label class="checkbox inline">  
    <input type="checkbox" id="inlineCheckbox1" value="option1"> Ddddddddd
</label>
<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> Eeeeeeeee
</label>
<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> Ffffffffffff
</label>

結果は次のとおりです。

何か案は？

Answer 1

no_indent クラス (または何でも) を追加することで、Bootstrap 2 クラスをオーバーライドできます。

<label class="checkbox inline no_indent">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> Aaaaaaaaaa
</label>

これをCSSに追加します：

.checkbox.inline.no_indent,
.checkbox.inline.no_indent+.checkbox.inline.no_indent {
  margin-left: 0;
  margin-right: 10px;
}
.checkbox.inline.no_indent:last-child {
  margin-right: 0;
}

ブートストラップ 3:クラスは 1 つのクラスcheckbox inlineに縮小されましたcheckbox-inline。HTML は次のようになります。

<label class="checkbox-inline no_indent">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> Aaaaaaaaaa
</label>

CSS:

.checkbox-inline.no_indent,
.checkbox-inline.no_indent+.checkbox-inline.no_indent {
  margin-left: 0;
  margin-right: 10px;
}
.checkbox-inline.no_indent:last-child {
  margin-right: 0;
}

Bootstrap 4:checkbox-inlineクラスは次のようになりましたform-check-inline:

<label class="form-check-inline no_indent">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> Aaaaaaaaaa
</label>

CSS:

.form-check-inline.no_indent,
.form-check-inline.no_indent+.checkbox-inline.no_indent {
  margin-left: 0;
  margin-right: 10px;
}
.form-check-inline.no_indent:last-child {
  margin-right: 0;
}

Answer 2

別のクラスを使用することなく、ラジオ ボタンの同じ問題を修正する完全な Bootstrap 3 ソリューションを次に示します。

.checkbox-inline,
.checkbox-inline + .checkbox-inline,
.checkbox-inline + .radio-inline,
.radio-inline,
.radio-inline + .radio-inline,
.radio-inline + .checkbox-inline {
    margin-left: 0;
    margin-right: 10px;
}

.checkbox-inline:last-child,
.radio-inline:last-child {
    margin-right: 0;
}

Answer 3

inline要素のクラスを削除しますlabel。