自举3滚动菜单 - 菜单扩大其集装箱存放时，不宜

102

我试图this method（their fiddle），以实现与引导滚动菜单，但这种做法，滚动菜单扩展其容器 - fiddle - 非滚动菜单正确，不会这样做。自举3滚动菜单 - 菜单扩大其集装箱存放时，不宜

我该如何解决这个问题？有关与Bootstrap兼容的其他方法的建议也很赞赏！

仅供参考，这里是从第一个方法的小提琴的HTML：

<ul class="nav"> 
    <li class="dropdown"> 
     <a class="icon-key icon-white" data-toggle="dropdown" href="#" style= 
     "font-weight: bold"></a> 

     <div class="dropdown-menu" style="margin-left: 2em"> 
      <ul class="dropdown-menu"> 
       <!-- static non-scrollable menu header 1 --> 
      </ul> 
     </div> 

     <div class="dropdown-menu" style="margin-left: 2em"> 
      <ul class="dropdown-menu"> 
       <li class="disabled"> 
        <a href="#"><i class="icon-group"></i> <b>My Groups</b></a> 
       </li> 

       <li> 
        <div class="dropdown-menu scroll-menu scroll-menu-2x" 
        style="margin-left: 2em"> 
         <ul class="dropdown-menu scroll-menu scroll-menu-2x"> 
          <li> 
           <a href="#">User</a> 
          </li> 

          <li> 
           <a href="#">Administrators</a> 
          </li> 

          <li> 
           <a href="#">Some Other Group</a> 
          </li> 
         </ul> 
        </div> 

        <ul class="dropdown-menu scroll-menu scroll-menu-2x"> 
         <!-- Additional menu items omitted for brevity --> 
        </ul> 
       </li> 
      </ul> 
     </div> 

     <div class="dropdown-menu" style="margin-left: 2em"> 
      <ul class="dropdown-menu"> 
       <!-- static non-scrollable menu header 2 --> 
      </ul> 
     </div> 

     <div class="dropdown-menu" style="margin-left: 2em"> 
      <ul class="dropdown-menu"> 
       <li class="disabled"> 
        <a href="#"><i class="icon-user"></i> <b>My Roles</b></a> 
       </li> 

       <li> 
        <div class="dropdown-menu scroll-menu scroll-menu-2x" 
        style="margin-left: 2em"> 
         <ul class="dropdown-menu scroll-menu scroll-menu-2x"> 
          <li> 
           <a href="#">Core Users</a> 
          </li> 

          <li> 
           <a href="#">Admin</a> 
          </li> 

          <li> 
           <a href="#">Some Other Role</a> 
          </li> 
         </ul> 
        </div> 

        <ul class="dropdown-menu scroll-menu scroll-menu-2x"> 
         <!-- Additional menu items omitted for brevity --> 
        </ul> 
       </li> 
      </ul> 
     </div> 

     <div class="dropdown-menu" style="margin-left: 2em"> 
      <ul class="dropdown-menu"> 
       <!-- static non-scrollable menu footer --> 
      </ul> 
     </div> 

     <ul class="dropdown-menu"> 
      <li class="disabled"> 
       <a href="#"><i class="icon-chevron-up pull-left"></i> <i class="icon-chevron-up pull-right"></i></a> 
      </li> 
     </ul> 
    </li> 
</ul>

而CSS：

/* So we wont impact the original bootstrap menu or it's pseudo call-out 
arrow the menu is wrapped in a sub dropdown-menu with a chained scroll-menu */ 
ul.scroll-menu { 
    position:relative; 
    display:inherit!important; 
    overflow-x:auto; 
    -webkit-overflow-scrolling:touch; 
    -moz-overflow-scrolling:touch; 
    -ms-overflow-scrolling:touch; 
    -o-overflow-scrolling:touch; 
    overflow-scrolling:touch; 
    top:0!important; 
    left:0!important; 
    width:100%; 
    height:auto; 
    max-height:500px; 
    margin:0; 
    border-left:none; 
    border-right:none; 
    -webkit-border-radius:0!important; 
    -moz-border-radius:0!important; 
    -ms-border-radius:0!important; 
    -o-border-radius:0!important; 
    border-radius:0!important; 
    -webkit-box-shadow:none; 
    -moz-box-shadow:none; 
    -ms-box-shadow:none; 
    -o-box-shadow:none; 
    box-shadow:none 
}

来源

2013-10-07 eliashdezr

它也适用于Bootstrap V4 – Tes3awy

272

我觉得你可以仅仅通过增加必要的CSS简化此属性，以您的特殊滚动菜单类..

CSS：

.scrollable-menu { 
    height: auto; 
    max-height: 200px; 
    overflow-x: hidden; 
}

HTML

  <ul class="dropdown-menu scrollable-menu" role="menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li><a href="#">Action</a></li> 
       .. 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
      </ul>

工作例如：http://bootply.com/86116

来源

2013-10-07 16:17:09 ZimSystem

哇，很好的方法！感谢你的回答。我会执行这个。 – eliashdezr

如果你更喜欢Plunker而不是Bootply，这里是：http://plnkr.co/edit/3VhYW1?p=preview –

我更喜欢Bootply ;-) http://bootply.com/86116 – ZimSystem

对于CSS，我发现180最大高度是显示chrome浏览器当手机横向320更好。

.scrollable-menu { 
    height: auto; 
    max-height: 180px; 
    overflow-x: hidden; 
}

此外，添加可见的滚动条，这个CSS应该做的伎俩：

.scrollable-menu::-webkit-scrollbar { 
    -webkit-appearance: none; 
    width: 4px;   
}  
.scrollable-menu::-webkit-scrollbar-thumb { 
    border-radius: 3px; 
    background-color: lightgray; 
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.75);   
}

这些变化体现在这里：https://www.bootply.com/BhkCKFEELL

来源

2015-05-18 16:23:23 blalond

我希望这个代码是做工精良，试试这个。

添加css文件。

.scrollbar { 
    height: auto; 
    max-height: 180px; 
    overflow-x: hidden; 
}

HTML代码：

<div class="col-sm-2 scrollable-menu" role="menu"> 
    <div> 
    <ul> 
    <li><a class="active" href="#home">Tutorials</a></li> 
    <li><a href="#news">News</a></li> 
    <li><a href="#contact">Contact</a></li> 
    <li><a href="#about">About</a></li> 
    <li><a href="#news">News</a></li> 
    <li><a href="#contact">Contact</a></li> 
    <li><a href="#about">About</a></li> 
    <li><a href="#news">News</a></li> 
    <li><a href="#contact">Contact</a></li> 
    <li><a href="#about">About</a></li> 
    <li><a href="#news">News</a></li> 
    <li><a href="#contact">Contact</a></li> 
    <li><a href="#about">About</a></li> 
    <li><a href="#news">News</a></li> 
    <li><a href="#contact">Contact</a></li> 
    <li><a href="#about">About</a></li> 

    </ul> 
    </div> 
    </div>

来源

2016-05-05 07:51:02

不要在UL标签的内嵌一切

<ul class="dropdown-menu scrollable-menu" role="menu" style="height: auto;max-height: 200px; overflow-x: hidden;"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li><a href="#">Action</a></li> 
       .. 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
      </ul>

来源

2016-09-12 19:21:13

我只是在我的项目 -

CSS代码解决这个问题

.scroll-menu{ 
    min-width: 220px; 
    max-height: 90vh; 
    overflow: auto; 
}

HTML代码

<ul class="dropdown-menu scroll-menu" role="menu"> 
    <li><a href="#">Action</a></li> 
    <li><a href="#">Another action</a></li> 
    <li><a href="#">Something else here</a></li> 
    <li><a href="#">Action</a></li> 
    .. 
    <li><a href="#">Action</a></li> 
    <li><a href="#">Another action</a></li> 
</ul>

来源

2017-05-26 05:49:29

您可以使用内置的CSS类自举3下拉的跨度元素内滚动的预，并立即生效，而不实现自定义的CSS。

<ul class="dropdown-menu pre-scrollable"> 
       <li>item 1 </li> 
       <li>item 2 </li> 

</ul>

来源

2017-10-23 14:23:45

自举3滚动菜单 - 菜单扩大其集装箱存放时，不宜

回答

相关问题