Question

我正在尝试使用Bootstrapdrop dowmn菜单创建一个朋友请求菜单，我想以这样的方式创建菜单，即如果朋友请求超过3，则可以滚动浏览，而li包含“你有2请求“和”检查所有请求“滚动时保持固定。我如何实现这一点，因为下拉菜单似乎不容易定制？

Answer 1

解决了问题....为了使您的下拉菜单的一部分可滚动，您必须在

标记标记中创建可滚动内容并应用css（溢出样式）。

＆＃13;

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}

.dropdown-menu > li{
  
    
   
}


.dropdown-menu > li > ul{
padding-left: 10px;
list-style-type: none;
    height: 100px;
    
    overflow-y:auto;
    overflow-x:hidden;
    left:0px;
    display: block;
}

.dropdown-menu > li > ul > li{
    
    left:0px;
    display: block;
}


ul {


  
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>


<div class="container">
  <h2>My answer</h2>                                         
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Friends List
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
    <li><a href="#">you have 10 requests </a></li>
    <li>
    <ul>
      <li><a>Friendx</a></li>
      <li><a href="#">Friend1</a></li>
      <li><a href="#">Friend2</a></li>
      <li><a href="#">Friend3</a></li>
      <li><a href="#">Friend4</a></li>
      <li><a href="#">Friend6</a></li>
      <li><a href="#">Friend7</a></li>
      <li><a href="#">Friend8</a></li>
      <li><a href="#">Friend9</a></li>
      </ul>
      </li>
      <li><a href="#">read more </a></li>
    </ul>
  </div>
</div>

</body>
</html>

＆＃13;

Answer 2

这篇文章看起来很像：Making a drop-down menu scrollable。你看过其他人的帖子吗？

Answer 3

将好友请求放在他们自己的div中并添加 max-height ：120px和溢出：自动。这应该是你想要的。

（您可以将max-height更改为您想要的任何高度，120px只是一个示例）

示例：

.requests { max-height: 120px; overflow: auto; }

如何使Bootstrap Dropdown菜单的一部分可滚动

3 个答案: