html – Bootstrap导航栏汉堡包图标不垂直对齐

概述我使用带有bootstrap 4.1.2的流畅套件. 从navbar docs(我想要这个,因为切换器在打开/关闭时更改其图标)我确实从#position部分采取了第二个例子.但是,汉堡不是垂直居中的.我该如何解决？ 导航栏错误的汉堡包： 我尝试删除填充但它没有帮助,我被卡住了. <script src="https://code.jquery.com/jquery-3.3.1.slim.min. 我使用带有bootstrap 4.1.2的流畅套件. @H_404_2@从navbar docs(我想要这个,因为切换器在打开/关闭时更改其图标)我确实从#position部分采取了第二个例子.但是,汉堡不是垂直居中的.我该如何解决？

@H_404_2@导航栏错误的汉堡包：

@H_404_2@

@H_404_2@我尝试删除填充但它没有帮助,我被卡住了.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.Js"></script><script src="https://cdnjs.cloudflare.com/AJAX/libs/popper.Js/1.14.0/umd/popper.min.Js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/Js/bootstrap.min.Js"></script><script src="https://cdn.Jsdelivr.net/gh/nespero/fluent-kit@1.3.0/Js/fluent-kit.min.Js"></script><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/CSS/bootstrap.min.CSS" rel="stylesheet"/><link href="https://cdn.Jsdelivr.net/gh/nespero/fluent-kit@1.2.0/CSS/fluent-kit.min.CSS" rel="stylesheet"/><nav >  <strong >    Navbar position example  </strong>  <button  type="button" data-toggle="collapse" data-target="#navbar-position" aria-controls="navbar-position" aria-expanded="false" aria-label="Toggle navigation">    <span >Toggle navbar submenu</span>  </button>  <div  ID="navbar-position">    <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="#">Disabled</a>      </li>    </ul>  </div></nav>

解决方法 从< button>中删除.btn类

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.Js"></script><script src="https://cdnjs.cloudflare.com/AJAX/libs/popper.Js/1.14.0/umd/popper.min.Js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/Js/bootstrap.min.Js"></script><script src="https://cdn.Jsdelivr.net/gh/nespero/fluent-kit@1.3.0/Js/fluent-kit.min.Js"></script><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/CSS/bootstrap.min.CSS" rel="stylesheet"/><link href="https://cdn.Jsdelivr.net/gh/nespero/fluent-kit@1.2.0/CSS/fluent-kit.min.CSS" rel="stylesheet"/><nav >  <strong >    Navbar position example  </strong>  <button  type="button" data-toggle="collapse" data-target="#navbar-position" aria-controls="navbar-position" aria-expanded="false" aria-label="Toggle navigation">    <span >Toggle navbar submenu</span>  </button>  <div  ID="navbar-position">    <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="#">Disabled</a>      </li>    </ul>  </div></nav>

总结

以上是内存溢出为你收集整理的html – Bootstrap导航栏汉堡包图标不垂直对齐全部内容，希望文章能够帮你解决html – Bootstrap导航栏汉堡包图标不垂直对齐所遇到的程序开发问题。

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