如何使bootstrap navbar下拉列表成为内联

Question

我被要求为我正在使用Bootstrap制作的网站提供内联子菜单项.

Bootstrap for drop-down的默认设置是一个很好的'downdown-toggle'类,其中项目是堆叠的,只有带有一些填充的项目的宽度.

如何使子菜单背景的类适应100%的屏幕宽度,然后容器中的子菜单项和内联不是堆叠的项目(li)？查看我想要实现的模拟图像.

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

在mk14之后编辑,下面给出了非常好的代码.这就是我得到的(见下图).我只需要将物品放在一个容器中(我以黄色显示)并按下菜单显示和隐藏的方式将页面内容向下推并备份.重申一下,我希望灰色背景是我所说的100%宽度的屏幕,但是容器中的项目.

Answer 1

好的,我正在根据您在其下发表的评论扩展第一个答案,并添加更多特异性和媒体查询.

http://jsbin.com/rusup/1/edit

演示:http://jsbin.com/rusup/1/

CSS(在较大的视口菜单启动时添加断点)

@media (min-width:768px) { 

  body { padding-top: 60px } /* height of the menu collapsed */

  .nav-bg {
        height: 0px;
        width: 100%;
        position: absolute;
        top: 50px;
        background: #e7e7e7;
        transition: all .5s ease-in-out;
    }

    .menu-open .nav-bg { height: 50px } /* change to your height of the child menu */

    .menu-open #page {
        padding-top:60px;
        transition: all .2s ease-in-out;
    }

    .navbar-nav.nav > li { position: static }

    .navbar-nav.nav .dropdown-menu {
        left: 0 !important;
        right: 0 !important;
        box-shadow: none;
        border: none;
        margin: 0 auto;
        max-width: 1170px;
        background: transparent;
        padding: 0;
    }

    .navbar-nav.nav .dropdown-menu > li { float: left }

    .navbar-nav.nav .dropdown-menu > li > a {
        width: auto !important;
        background: transparent;
        line-height: 49px;
        padding-top: 0;
        padding-bottom: 0;
        margin: 0;
    }
}

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');  
        }
});

HTML

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