Css 如何使引导navbar下拉列表适应内联

我被要求为我正在使用Bootstrap创建的站点提供内联子菜单项

使用Bootstrap for下拉列表的默认设置是一个很好的“downdown toggle”类，在该类中，项目是堆叠的，并且只有带有一些填充的项目的宽度

如何调整该类使子菜单背景为100%屏幕宽度，然后使容器中的子菜单项和内联的项（li）不堆叠？看到我想要实现的模型图像

请注意，与当前的子菜单不同，这需要向下推送下面的所有内容，而不是将鼠标悬停在上面

在mk14给出了下面非常好的代码之后进行编辑。这就是我得到的（见下图）。我只需要将项目放在一个容器中（我用黄色显示），并在菜单显示和隐藏时向下和向上推页面内容。重申一下，我希望灰色背景是100%的屏幕宽度，正如我所说，但在容器中的项目

将此主题作为一般解决方案

下面是对引导的一个改编：

.nav > li{
position: static !important;
}
.dropdown-menu {
left: 0 !important;
right: 0 !important;
}
.dropdown-menu > li{
float: left !important;
} 
.dropdown-menu > li > a{
width:auto !important;
}

---

好的，我根据你在下面的评论扩展第一个答案，并增加更多的细节和媒体查询

演示：

---

CSS（当大视口菜单启动时添加断点）

jQuery：

$('.navbar').append('<span class="nav-bg"></span>');


$('.dropdown-toggle').click(function() {

    if (!$(this).parent().hasClass('open')) {

        $('html').addClass('menu-open');

    } else {

        $('html').removeClass('menu-open');

    }

});


$(document).on('click touchstart', function (a) {
        if ($(a.target).parents().index($('.navbar-nav')) == -1) {
                $('html').removeClass('menu-open');  
        }
});

$（'.navbar'）。附加（''）；
$（'.dropdown toggle'）。单击（函数（）{
if（！$（this.parent（）.hasClass（'open'））{
$（'html'）.addClass（'menu-open'）；
}否则{
$（'html'）.removeClass（'menu-open'）；
}
});
$（文档）。在（'单击touchstart'，函数（a）{
if（$（a.target）.parents（）.index（$（'.navbar-nav'））=-1）{
$（'html'）.removeClass（'menu-open'）；
}
});

HTML

切换导航



















我发现这是一页。

这对于内联项目来说真是太棒了，非常感谢mk14。但它需要做的两件关键事情是：1）向下推下面的内容，不要悬停，最重要的2）项目落在页面左侧不远的主容器中。我将用一个图形编辑我的问题，以说明现在发生了什么。我已经对您的代码进行了一些样式设置。尝试将相同的样式添加到.dropdown菜单中，与页面上的样式相同.container.不错！非常感谢你，这正是我需要的。“最大宽度”在全宽度模式下运行良好，但我需要在断点（如1199px）处添加规则，因为它再次脱离容器。我删除了易入易出的过渡，当它工作时很好，但在Chrome和其他一些程序中跳跃。jQueryAppend类是一个用于上下移动页面内容的简洁解决方案。我已经使导航栏在点击页面顶部（offset（）.top和scrollTop）时变得粘滞，并使用此方法在页面内容出现时移动页面内容。再次感谢您将此设置为：-）很好的解决方案，但是有一个问题是，当您跟随其中的链接时，第二个菜单将关闭。如果您想在该部分中打开第二个菜单，该怎么办？尝试并编写代码示例后，请提出一个新问题。我不再使用Bootstrap或在上面做很多事情。

$('.navbar').append('<span class="nav-bg"></span>');


$('.dropdown-toggle').click(function() {

    if (!$(this).parent().hasClass('open')) {

        $('html').addClass('menu-open');

    } else {

        $('html').removeClass('menu-open');

    }

});


$(document).on('click touchstart', function (a) {
        if ($(a.target).parents().index($('.navbar-nav')) == -1) {
                $('html').removeClass('menu-open');  
        }
});

  <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-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="#">Link</a></li>
          </ul>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Dropdown 2 Child 1</a></li>
                <li><a href="#">Dropdown 2 Child 2</a></li>
                <li><a href="#">Dropdown 2 Child 3</a></li>
                <li><a href="#">Dropdown 2 Child 4</a></li>
          </ul>
         </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>
  
<div class="container" id="page">
  Me finks this is a page.
  
  </div>