3

我想自定义引导下拉菜单。我的 DropDown 有很多记录。我想在引导下拉列表的 ul 部分添加细长滚动。

请看以下链接——

_http://jsfiddle.net/saurabh29/pgrdm7jt/2/

请帮忙....

提前致谢。

4

2 回答 2

4

这是选项中的引导下拉自定义滚动条。请参阅此小提琴供您参考。

谢谢

   <div class="btn-group">
   <div >
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Scrollable Menu <span class="caret"></span></button>
            <ul class="dropdown-menu scrollable-menu scrollbar" role="menu" id="ex4" >
                <li><a href="#">Drop1</a></li>
                <li><a href="#">Drop2</a></li>
                <li><a href="#">Drop3</a></li>
                <li><a href="#">Drop4</a></li>
                <li><a href="#">Drop5</a></li>
                <li><a href="#">Drop6</a></li>
                <li><a href="#">Drop7</a></li>
                <li><a href="#">Drop8</a></li>
                <li><a href="#">Drop9</a></li>
                <li><a href="#">Drop10</a></li>
                <li><a href="#">Drop11</a></li>
                <li><a href="#">Drop12</a></li>
                <li><a href="#">Drop13</a></li>
                <li><a href="#">Drop14</a></li>
            </ul>
            </div>
     </div>

这里是css：-

 .scrollbar{ 
    background-color:lightgray;height: auto;
    max-height: 200px;
    overflow-x:hidden;
    overflow-y:scroll; 
    min-width: 135px;
    margin-top: 0px; 
   }
  #ex4::-webkit-scrollbar { width:10px;background-color:#cccccc; } 
  #ex4::-webkit-scrollbar-thumb { background-color:#B03C3F;border-radius:10px; }
  #ex4::-webkit-scrollbar-thumb:hover { background-color:#BF4649;border:1px solid #333333; }
  #ex4::-webkit-scrollbar-thumb:active { background-color:#A6393D;border:1px solid #333333; }
于 2014-11-19T05:08:17.513 回答
1

像这样构造html并将滚动应用于内部UL

<ul class="dropdown-menu list-group">
    <li>
        <ul class="list-group" id="scroller">
            <li class="loading empty">menu item</li>
        </ul>
    </li>
</ul>
于 2014-11-21T12:06:29.877 回答