html – Bootstrap 4可切换导航栏_html-js-css

概述我正在尝试从Bootstrap 3.x迁移到4,我遇到了新的导航栏问题.无论我选择哪种navbar-toggleable-x选项,导航栏总会显示汉堡包按钮,就像折叠一样. 这个HTML文档演示了我的问题.我在官方文档页面上找到了它. <html><head><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstra 我正在尝试从bootstrap 3.x迁移到4,我遇到了新的导航栏问题.无论我选择哪种navbar-toggleable-x选项,导航栏总会显示汉堡包按钮,就像折叠一样.

这个HTML文档演示了我的问题.我在官方文档页面上找到了它.

<HTML><head><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/CSS/bootstrap.min.CSS" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/Js/bootstrap.min.Js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script></head><body><nav >  <button  type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">    <span ></span>  </button>  <a  href="#">Navbar</a>  <div  ID="navbarNavDropdown">    <ul >      <li >        <a  href="#">Home <span >(current)</span></a>      </li>      <li >        <a  href="#">Features</a>      </li>      <li >        <a  href="#">Pricing</a>      </li>      <li >        <a  href="http://example.com" ID="navbarDropdownMenulink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">          Dropdown link        </a>        <div  aria-labelledby="navbarDropdownMenulink">          <a  href="#">Action</a>          <a  href="#">Another action</a>          <a  href="#">Something else here</a>        </div>      </li>    </ul>  </div></nav></body></HTML>

解决方法从bootstrap 4 beta开始,toggleable已被expand扩展.

现在它是“扩展”断点,而不是“切换”断点,逻辑会相应地改变,因此navbar-toggleable-md现在将是navbar-expand-lg ..

https://www.codeply.com/go/Io0duaPkqz

<nav >  <button  type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">    <span ></span>  </button>  <a  href="#">Navbar</a>  <div  ID="navbarNavDropdown">    <ul >      <li >        <a  href="#">Home <span >(current)</span></a>      </li>      <li >        <a  href="#">Features</a>      </li>      <li >        <a  href="#">Pricing</a>      </li>      <li >        <a  href="http://example.com" ID="navbarDropdownMenulink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">          Dropdown link        </a>        <div  aria-labelledby="navbarDropdownMenulink">          <a  href="#">Action</a>          <a  href="#">Another action</a>          <a  href="#">Something else here</a>        </div>      </li>    </ul>  </div></nav>

https://www.codeply.com/go/Io0duaPkqz

如果希望导航栏水平扩展,则需要navbar-expand *类,否则导航栏默认为移动,垂直折叠版本.

有关bootstrap 4 changes from alpha 6 to beta的更多信息

总结

以上是内存溢出为你收集整理的html – Bootstrap 4可切换导航栏全部内容，希望文章能够帮你解决html – Bootstrap 4可切换导航栏所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/web/1103701.html