Question

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

```

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

```

Answer 1

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

只是带有链接的代码下面的bootstrap 4的文档：

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

Answer 2

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

使用bootstrap使navbar可折叠

2 个答案: