Bootstrap 3导航栏下拉列表被切断

Question

我有一个导航栏：

包含多个带下拉菜单的菜单点。为了避免在进入md-perspective之前换行，我计划让这个导航栏在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;}

如示例图片中所示，我遇到的问题是下拉列表从以下容器中被切断。

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

Answer 1

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

获取您在此处提供的代码并将其放入codepen。

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

为了避免菜单分成2行以上，您需要触发Bootstrap菜单更快崩溃（即转入移动菜单）。这是因为侧面可滚动的导航栏不利于用户体验，并且会导致样式问题。

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

希望这有帮助！