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测试版，并且我在某个过程中以某种方式破坏了导航栏。我相信它与改变＆＃34;切换＆＃34;有关。和＆＃34;扩展＆＃34;但我已经玩了好几个小时而没有成功。

导航栏应显示在页面顶部，作为平均导航栏。相反，我在左上角有一个小盒子，可以扩展菜单。

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>

我建议您访问以下网址并查看示例导航栏，了解它们在Bootstrap 4中的工作方式。

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

Bootstrap 4 Beta Navbar Migration

1 个答案: