如何使 Bootstrap 下拉菜单的一部分可滚动答案

【问题标题】：How to make part of a Bootstrap Dropdown menu scrollable如何使 Bootstrap 下拉菜单的一部分可滚动
【发布时间】：2018-03-14 10:16:04
【问题描述】：

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

【问题讨论】：

在此处粘贴代码。屏幕截图没有帮助。
代码好长啊
你可以在 jsFiddle 创建一个小提琴，或者插入代码作为 sn-p。
完成...我添加了一个 lil 代码 sn-p。我实际上已经解决了我的问题，我现在的问题是将请求与“你有 2 个朋友请求”和“阅读更多”放在同一行。

标签： jquery html css

【解决方案1】：

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

中创建可滚动内容

标记标记并应用 css（对其进行溢出样式）。

.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 {


  
}

<!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>

【讨论】：

【解决方案2】：

这篇文章看起来非常类似于：Making a drop-down menu scrollable。你看过别人的帖子吗？

【讨论】：

不是同一个兄弟，请仔细阅读我的问题。我只想让一部分可以滚动，你明白吗？
我添加了一个 lil 代码 sn-p。我实际上已经解决了我的问题，我现在的问题是将请求与“你有 2 个朋友请求”和“阅读更多”放在同一行。你能帮我吗？？

【解决方案3】：

将好友请求放在自己的 div 中并添加 最大高度：120 像素和溢出：自动。这应该是你想要的。

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

示例：

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

【讨论】：

我添加了一个 lil 代码 sn-p。我实际上已经解决了我的问题，我现在的问题是将请求与“你有 2 个朋友请求”和“阅读更多”放在同一行，请你帮我解决一下吗？
你能发一张截图看看它现在的样子吗？
我添加了一个sn-p
抱歉，我不明白您到底希望它是什么样子。你想让它们都挨着吗？如果是，请使用 flexbox 或 display: inline-block
您能否通过选中我的问题旁边的复选标记将问题标记为已回答？其他用户将能够更轻松地找到答案