居中引导导航栏汉堡包

hamburger

关注

发信

关注(28)粉丝(399)

居中引导导航栏汉堡包

本文介绍了居中引导导航栏汉堡包的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

将链接放在引导程序导航栏中非常容易(请参阅对类似问题的回答之一中的小提琴，这里).

如何将折叠的汉堡包"居中，使其也出现在导航栏的中心?

相关代码如下:

@media(最小宽度:768px){/* 居中导航 */.nav.navbar-nav {向左飘浮;}.nav.navbar-nav {清除:左；向左飘浮;边距:0；填充:0；位置:相对；左:50%；文本对齐:居中；}.nav.navbar-nav >李{位置:相对；正确:50%；}.nav.navbar-nav li {文本对齐:左}}</风格><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>

<div class="collapse navbar-collapse" id="myNavbar"><ul class="nav navbar-nav"><li><a href="#">关于</a></li><li><a href="#">帖子</a></li><li><a href="#">食谱</a></li><li><a href="#">按</a></li><li><a href="#">联系方式</a></li>

</nav>

解决方案

中心汉堡包"也很简单:

.navbar-header{文字对齐:居中；}.navbar-toggle {浮动:无；边距右:0;}

It's pretty easy to center the links in a bootstrap navbar (see fiddle in one of the responses to similar questions, here).

How can one center the collapsed "hamburger" so that it appears in the center of the navigation bar as well?

For refernece, the relevant code is below:

<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>

解决方案

Center "hamburger" is also pretty easy:

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

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

这篇关于居中引导导航栏汉堡包的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-04 03:43