Question

将链接集中在引导程序导航栏中非常容易（请参阅对类似问题的回复中的小提琴，here）。

如何以折叠＆＃34;汉堡包为中心＆＃34;这样它也出现在导航栏的中心？

有关推荐，相关代码如下：

<style>
@media (min-width:768px) { 
  /* centered navigation */
  .nav.navbar-nav {
    float: left;
  }

  .nav.navbar-nav {
    clear: left;
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    left: 50%;
    text-align: center;
  }

  .nav.navbar-nav > li {
    position: relative;
    right: 50%;
  }

  .nav.navbar-nav li {
    text-align: left
  }
}
</style>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li><a href="#">About</a></li>
        <li><a href="#">Posts</a></li>
        <li><a href="#">Recipes</a></li>
        <li><a href="#">Press</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

Answer 1

中心＆＃34;汉堡＆＃34;也很简单：

.navbar-header{
    text-align:center;
}

.navbar-toggle {
    float: none;
    margin-right:0;
}

中心引导导航栏汉堡包

1 个答案: