使导航栏可折叠

-1

我有这个导航栏，我试图让它崩溃，所以所有的链接和右边的按钮将折叠到汉堡菜单，点击时，将显示黑色背景链接垂直列出使导航栏可折叠

```

<body> 
    <header id="nav-wrapper"> 
     <img id="logo" src="images/event-logo.png" /> 
     <nav class="navbar navbar-default"> 
      <div class="container-fluid"> 
       <ul class="nav navbar-nav"> 
        <li class="nav-list active"><a class="link" href="">HOME</a></li> 
        <li class="nav-list"><a class="link" href="">SPEAKERS</a></li> 
        <li class="nav-list"><a class="link" href="">AGENDA</a></li> 
        <li class="nav-list"><a class="link" href="">SPONSORS</a></li> 
        <li class="nav-list"><a class="link" href="">MEDIA</a></li> 
        <li class="nav-list"><a class="link" href="">disruptHR</a></li> 
        <li class="nav-list"><a class="link" href="">TRAVEL</a></li> 
        <li class="nav-list"><a class="link" href="">FLOORPLAN</a></li> 
        <li class="link">MORE</li> 
        <button id="tickets-btn">GET TICKETS</button> 
       </ul> 
      </div> 
     </nav> 
    </header> 
</body>

```

来源

2017-08-10 Justin Pierson

https://v4-alpha.getbootstrap.com/components/navbar/

自举4的刚文档，以下次e代码与您的链接：

<body> 
<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 
    <a class="navbar-brand" href="#">Navbar</a> 

    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
    <ul class="navbar-nav mr-auto"> 
     <li class="nav-list nav-item active"><a class="link nav-link" href="">HOME</a></li> 
     <li class="nav-list nav-item"><a class="link nav-link" href="">SPEAKERS</a></li> 
     <li class="nav-list nav-item"><a class="link nav-link" href="">AGENDA</a></li> 
     <li class="nav-list nav-item"><a class="link nav-link" href="">SPONSORS</a></li> 
     <li class="nav-list nav-item"><a class="link nav-link" href="">MEDIA</a></li> 
     <li class="nav-list nav-item"><a class="link nav-link" href="">disruptHR</a></li> 
     <li class="nav-list nav-item"><a class="link nav-link" href="">TRAVEL</a></li> 
     <li class="nav-list nav-item"><a class="link nav-link" href="">FLOORPLAN</a></li> 
     <li class="link nav-item"> MORE </li> 
     <li class="nav-item"><button id="tickets-btn">GET TICKETS</button></li> 
    </ul> 
    </div> 
</nav> 
</body>

来源

2017-08-10 22:01:41 silviajoy

阅读navbar docs。 Bootstrap 4现在是测试版。

https://www.codeply.com/go/4GM7ligFGu

<nav class="navbar navbar-expand-md navbar-light bg-light"> 
    <a class="navbar-brand" href="#"><img id="logo" src="//placehold.it/130x30"></a> 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 
    <div class="collapse navbar-collapse" id="navbarContent"> 
    <ul class="navbar-nav mr-auto"> 
     <li class="nav-item active"> 
     <a class="nav-link" href="#">HOME</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#">SPEAKERS</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#">AGENDA</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#">SPONSORS</a> 
     </li> 
    </ul> 
    </div> 
</nav>

https://www.codeply.com/go/4GM7ligFGu

来源

2017-08-11 12:04:04 ZimSystem

使导航栏可折叠

回答

相关问题