1

Bootstrap 3 を使用して、文の途中にチェックボックスがあるフォームを作成しようとしています。Inline Checkboxesを使用する必要があると想定していますが、行の高さに対して次のことを行います。

ここに画像の説明を入力

サンプル コードはhttp://www.bootply.com/92125にあります。

チェックボックスをその周囲と真にインラインにする方法はありますか?

4

1 に答える 1

0

Bootply でコードを再確認しました。form-horizontalクラスの使用時に問題が発生しました。なぜそれを使用する必要があるのか​​ わかりませんが、いくつかの理由があるかもしれません。

Bootstrap.css行 2153 を見てみましょう。

.form-horizontal .control-label,
.form-horizontal .radio,
.form-horizontal .checkbox,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {
  padding-top: 7px;
  margin-top: 0;
  margin-bottom: 0;
}

があることがわかりますpadding-top: 7px。これにより、チェックボックスが押し下げられ7pxます。

この問題を解決するには、2 つのオプションがあります。

  1. form-horizontal不要な場合は、クラスを削除してください。
  2. 新しいクラスを作成し、次を設定しpadding-top: 0ます。

あなたのCSSファイル：

.foo{
  padding-top: 0 !important;
}

HTML ファイル :

<label class="checkbox-inline foo"><input type="checkbox" value="Adopted" id="family-adopted">please check this box.</label>
于 2013-11-06T16:32:31.820 に答える