Bootstrap 4 Beta 导航栏迁移

Question

<div id="navarea">
 <nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav custom_nav">
        <li class=""><a href="index.html">Home</a></li>
        <li class="dropdown"> <a href="#" class="" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown</a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
          </ul>
        </li>
        <li><a href="#">Store</a></li>
        <li><a href="#">Media</a></li>
        <li><a href="#">Partners</a></li>
      </ul>
    </div>
  </div>
</nav>

我正在将一个较旧的网站迁移到 Bootstrap 4 测试版，并且在此过程中我以某种方式破坏了导航栏。我相当有信心它与“切换”和“扩展”的变化有关，但我已经玩了几个小时没有成功。

导航栏应显示在页面顶部，作为一般的导航栏。相反，我在左上角有一个小框，可以展开菜单。

Answer 1

bootstrap 3 导航栏无法复制并粘贴到 bootstrap 4 中。您需要做一些工作来根据自己的喜好重新创建菜单。

这是 bootstrap 4 的示例菜单供参考。

<nav class="navbar navbar-expand-lg navbar-default">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

<div class="collapse navbar-collapse">
    <ul class="navbar-nav">
        <li class="nav-item active">
            <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Store</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Media</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Partners</a>
        </li>
    </ul>
</div>

我建议您访问以下 URL 并查看示例导航栏以了解它们在 Bootstrap 4 中的工作原理。

https://getbootstrap.com/docs/4.0/examples/