Bootstrap 3 导航栏下拉菜单被删除答案

【问题标题】：Bootstrap 3 navbar dropdowns are cutted ofBootstrap 3 导航栏下拉菜单被删除
【发布时间】：2018-10-09 07:09:30
【问题描述】：

我有一个导航栏：

其中包含几个带有下拉菜单的菜单点。为了避免在进入 md-viewpoint 之前换行，我计划让这个导航栏在 x 轴上可滚动。

以下代码没有任何问题：

<div class="header-container-nav-master hidden-xs hidden-sm">
<ul class="header-navigator container">
    <div class="col-xs-12">
 <li class="dropdown"><div class="dropdown show">
    <a href="..." class="nav-sub dropdown-toggle" data-ref="71" role="button" id="dropdownMenuLink" aria-haspopup="true" aria-expanded="false">Item</a>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <ul>
    <li><strong>Subheading</strong></li>
    <li class="brandsofcat"><a class="dropdown-item" href="#"></a></li>
    </ul></div>
  </div>
</li>
....
<li>...</li>
....
 </div>
</ul>

我的 CSS 如下所示：

.header-container-nav-master {
 width: 100%;
 background-color:#fff;
 height:52px;
 padding:0px 18px;
 border-bottom: 1px solid #e5e5e5;
 border-top: 1px solid #e5e5e5;
 white-space: nowrap;
 overflow-x: scroll;
 overflow-y: visible;}

 .header-container-nav-master ul {
 height:100%;
 padding:0;
 display: flex;
 align-items: center;}

 .header-container-nav-master ul li {
 font-size: 12px;
 letter-spacing: 0.75px;
 padding-right: 22px;
 color: #1f1f1f!important;
 display: inline-block;
 list-style:none;}

如示例图片所示，我遇到的问题是下拉菜单从以下容器中截断。

有人知道如何解决这个问题吗？

【问题讨论】：

标签： css twitter-bootstrap-3 bootstrap-modal

【解决方案1】：

这种情况下的问题是您的 CSS 中的 overflow-x: scroll;。

把你在这里给的代码放进codepen。

看看它并查看 CSS 块中的 cmets：https://codepen.io/anon/pen/WJRwOx

为了避免菜单超过 2 行，您需要触发 Bootstrap 菜单以更快地折叠（即变成移动菜单）。这是因为侧滚动导航栏不利于用户体验，并且会导致样式问题。

此外，我看到您有一个 <div class="col-xs-12"> 作为您的 <ul class="header-navigator container"> 的直接子代。据我所知，您不应该在 HTML5 中将 div 嵌套在 ul 元素中，因为某些浏览器可能会自动关闭父 ul 元素。

希望这会有所帮助！

【讨论】：