具有可滾動選擇列表的Bootstrap下拉列表

Question

我正在嘗試創建一個下拉列表，其中包含兩個命令（Sort asc和Sort des），這些命令將一鍵執行，並在頂部列出，其后是“選擇過濾”下的一部分，其中包含命令“全部切換” （不關閉下拉列表）和名稱的可滾動列表（不滾動頂部的命令），可通過復選框選擇它們。

我已經有了一個很好的方法，我無法實現的部分是唯一名稱的滾動。 當我嘗試實現復選框時，名稱會更改外觀，我希望它們的復選框與其他命令對齊，然后與填充對齊，然后與名稱對齊（不要感到厭煩）。 但是我得到了留有余地的盒子，沒有填充和粗體名稱。 然后是滾動條，我不能僅將其設置為名稱，而是遍歷所有下拉菜單，否則我將獲得一個單獨的滾動條，每個名稱都位於下面的文本中。 我想將一個子類設為：，讓我可以為那些菜單項設置滾動條。

我已經在標簽上使用div：s和class進行了實驗，但是我無法弄清楚。 請幫助我解決這個問題。

HTML

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Names <b class="caret"></b></a>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">Sort Ascending</a></li>
        <li><a href="#">Sort Descending</a></li>
        <li class="divider"></li>
        <li class="dropdown-header">Choose Filtering</li>
        <li class="divider"></li>
        <li><a href="#">Toggle All</a></li>
        <li class="divider"></li>       
        <li class="dropdown-menu-form"><label><input type="checkbox">Name 1</label></li>
        <li class="dropdown-menu-form"><label><input type="checkbox">Name 2</label></li>
        <li class="dropdown-menu-form"><label><input type="checkbox">Name 3</label></li>
        <div class="dd-list">
            <li><label><input type="checkbox">Name 4</label></li>
            <li><label><input type="checkbox">Name 5</label></li>
        </div>
    </ul>
</li>

更正的HTML-現在可以使用：

<div class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Consult <b class="caret"></b></a>
    <ul class="dropdown-menu" role="menu">
        <li class="dropdown-header">Choose sort method</li>
        <li class="divider"></li>
        <li><a href="#asc">Sort Ascending</a></li>
        <li><a href="#desc">Sort Descending</a></li>
        <li class="divider"></li>
        <li class="divider"></li>
        <li class="dropdown-header">Choose Filtering</li>
        <li class="divider"></li>
        <li>
            <ul class="dropdown-menu-form" role="menu">
                <li><label>Toggle All</label></li>
                <li><label class="checkbox"><input type="checkbox" />Name 1</label></li>
                <li><label class="checkbox"><input type="checkbox" />Name 2</label></li>
                <li><label class="checkbox"><input type="checkbox" />Name 3</label></li>
                <li><label class="checkbox"><input type="checkbox" />Name 4</label></li>
                <li><label class="checkbox"><input type="checkbox" />Name 5</label></li>
                <li><label class="checkbox"><input type="checkbox" />Name 6</label></li>
            </ul>
        </li>
        <li class="divider"></li>
        <li><button class="btn btn-default btn-apply" name="filter" value="Filter" type="submit">Apply Filter</button></li>
    </ul>
</div>

Java腳本

<script>
    $('.dropdown-menu').on('click', function(e) {
        if($(this).hasClass('dropdown-menu-form')) {
            e.stopPropagation();
        }
        if($(this).hasClass('dd-list')) {
            e.stopPropagation();
        }
    });
</script>

CSS

使用：Bootstrap-3.1.1

和我自己的Styles.css：

li.dropdown-menu-form {
    padding: 5px 10px 0;
    max-height: 100px;
    overflow-y: scroll;
}

#dd-list {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 20px;
    padding-left: 10px;
    font-weight: normal;
    overflow-y: scroll;
}


Corrected CSS:
ul.dropdown-menu-form {
    padding-left: 20px;
    list-style-type: none;
    max-height: 100px;
    overflow-y: scroll;
}

Answer 1

之所以使用粗體，是因為標簽選擇器的Bootstrap css是粗體。 所以要改變它：

li.dropdown-menu-form label, .dd-list li label {
  font-weight: normal;
}

要在復選框后添加填充，請執行以下操作：

li.dropdown-menu-form input, .dd-list li input {
  display: inline-block;
  margin-right: 10px;
}

為了使滾動條正確，您不能告訴li.dropdown-menu-form的最大高度為100px，滾動的溢出值為y，因為它將使用類dropdown-menu將其應用於每個單獨的列表項-形成。 因此，您可以嘗試將下拉列表包裝在div中，並為其分配一個不同的類，您可以在其中應用max-height和overflow-y屬性。 （就像包裹了dd列表一樣）。