ドロップダウンにチェックボックスを置くブートストラップ

J.ジル

次のようなドロップダウンにチェックボックスフォームを配置しようとしています。

<ul>
  <li class="dropdown">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">
      Dropdown Form<b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><label class="checkbox"><input type="checkbox">Two</label></li>
      <li><label class="checkbox"><input type="checkbox">Two</label></li>
    </ul>
  </li>
</ul>

これがBootplyのデモです

ただし、デモでわかるように、何らかの理由で、実際のチェックボックス自体がドロップダウンメニューの外に表示されます。誰かがそれを引き起こしているものと、代わりにそれをどのように実装すべきかを教えてもらえますか?ラベルクラスを削除すると機能しますが、すべてがまとまっています。

ジミーノット

Bootstrapがドキュメントでチェックボックスを使用する方法は次のとおりです。

<div class="checkbox">
    <label>
        <input type="checkbox">Two
    </label>
</div>

したがって、次のようになります。

<ul>
    <li class="dropdown">
        <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown Form<b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li>
                <div class="checkbox">
                    <label>
                        <input type="checkbox">Two
                    </label>
                </div>
            </li>
            <li>
                <div class="checkbox">
                    <label>
                        <input type="checkbox">Two
                    </label>
                </div>
            </li>
        </ul>
    </li>
</ul>

ドキュメント:http//getbootstrap.com/css/#forms

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

チェックボックスブートストラップ内にドロップダウン

分類Dev

ブートストラップドロップダウンチェックボックス選択

分類Dev

チェックボックスのフォーマットに関するブートストラップ動的ドロップダウン

分類Dev

ドロップダウンリストのチェックボックス

分類Dev

ドロップダウンチェックボックスリストcakephp

分類Dev

ドロップダウンリストにチェックボックスを追加

分類Dev

jspの各ドロップダウンリスト要素にチェックボックスを追加する方法

分類Dev

ドロップダウンリスト(MVC)にチェックボックスアイテムを表示する

分類Dev

mvcのajax jqueryでドロップダウンリストをチェックボックスに変更

分類Dev

ボケウィジェットからの選択を使用するときのエラー(チェックボックスとドロップダウン)

分類Dev

チェックボックスをオンにしたときにブートストラップモーダルを開く方法(チェックボックスにチェックマークを付けた場合)

分類Dev

ドロップダウンメニューボタンをクリックすると、リンクを開くブートストラップ

分類Dev

Woocommerceチェックアウト:国のドロップダウンにプレースホルダーを追加

分類Dev

クリック時にブートストラップドロップダウンボタンの値をリセット

分類Dev

ドロップダウンメニューをレスポンシブテンプレートのテキストボックスに置き換えます

分類Dev

ajax、jsp、サーブレットを使用して選択ボックスを使用しています..2番目の依存ドロップダウンにチェックボックス付きの選択ボックスを表示したい

分類Dev

PHP、MySQLのドロップダウンリストの代わりにチェックボックス

分類Dev

テキストボックスに対する JavaScript チェック ドロップダウン値

分類Dev

ドロップダウンリストとチェックボックスからグリッドビューに値を追加する方法

分類Dev

ドロップダウンをスクロール可能にするブートストラップ4

分類Dev

Twitterブートストラップオートコンプリートドロップダウン/ Knockoutjsを使用したコンボボックス

分類Dev

ブートストラップ用のウェル内のチェックボックスグリッド配置

分類Dev

チェックボックスとドロップダウンリストの製品を番号ボックスに表示する方法

分類Dev

アクセス:チェックボックスのドロップダウンリスト

分類Dev

ブートストラップ4-ボタンのドロップダウンとツールチップ?

分類Dev

ブートストラップのリンクにドロップダウンメニューを追加する

分類Dev

チェックボックスとキーボードナビゲーションを備えた剣道ドロップダウンリスト

分類Dev

選択ボックスをクリックすると、ブートストラップドロップダウンが閉じます

分類Dev

ブートストラップチェックボックスボタンが正しく表示されない

Related 関連記事

  1. 1

    チェックボックスブートストラップ内にドロップダウン

  2. 2

    ブートストラップドロップダウンチェックボックス選択

  3. 3

    チェックボックスのフォーマットに関するブートストラップ動的ドロップダウン

  4. 4

    ドロップダウンリストのチェックボックス

  5. 5

    ドロップダウンチェックボックスリストcakephp

  6. 6

    ドロップダウンリストにチェックボックスを追加

  7. 7

    jspの各ドロップダウンリスト要素にチェックボックスを追加する方法

  8. 8

    ドロップダウンリスト(MVC)にチェックボックスアイテムを表示する

  9. 9

    mvcのajax jqueryでドロップダウンリストをチェックボックスに変更

  10. 10

    ボケウィジェットからの選択を使用するときのエラー(チェックボックスとドロップダウン)

  11. 11

    チェックボックスをオンにしたときにブートストラップモーダルを開く方法(チェックボックスにチェックマークを付けた場合)

  12. 12

    ドロップダウンメニューボタンをクリックすると、リンクを開くブートストラップ

  13. 13

    Woocommerceチェックアウト:国のドロップダウンにプレースホルダーを追加

  14. 14

    クリック時にブートストラップドロップダウンボタンの値をリセット

  15. 15

    ドロップダウンメニューをレスポンシブテンプレートのテキストボックスに置き換えます

  16. 16

    ajax、jsp、サーブレットを使用して選択ボックスを使用しています..2番目の依存ドロップダウンにチェックボックス付きの選択ボックスを表示したい

  17. 17

    PHP、MySQLのドロップダウンリストの代わりにチェックボックス

  18. 18

    テキストボックスに対する JavaScript チェック ドロップダウン値

  19. 19

    ドロップダウンリストとチェックボックスからグリッドビューに値を追加する方法

  20. 20

    ドロップダウンをスクロール可能にするブートストラップ4

  21. 21

    Twitterブートストラップオートコンプリートドロップダウン/ Knockoutjsを使用したコンボボックス

  22. 22

    ブートストラップ用のウェル内のチェックボックスグリッド配置

  23. 23

    チェックボックスとドロップダウンリストの製品を番号ボックスに表示する方法

  24. 24

    アクセス:チェックボックスのドロップダウンリスト

  25. 25

    ブートストラップ4-ボタンのドロップダウンとツールチップ?

  26. 26

    ブートストラップのリンクにドロップダウンメニューを追加する

  27. 27

    チェックボックスとキーボードナビゲーションを備えた剣道ドロップダウンリスト

  28. 28

    選択ボックスをクリックすると、ブートストラップドロップダウンが閉じます

  29. 29

    ブートストラップチェックボックスボタンが正しく表示されない

ホットタグ

アーカイブ