记录一下bootstrap导航条里面的导航按钮居中，并响应小屏幕

1：.navbar-collapse 设置 文字居中 text-align: center;
2：导航容器 .navbar-nav，设置为行内块元素 display: inline-block;
3：导航选项 li， 设置为块元素 display: block;

 <nav class="navbar navbar-default navbar-inverse navbar-fixed-top nav-justified">
      <div class="container customContainer">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu"
            aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand logo text-center" href="#">
            <img alt="Brand" src="./img/logo.png">
          </a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="menu">

            <ul class="nav navbar-nav">
              <li>
                <a href="javascript:void(0)"> 嘎嘎嘎嘎嘎</a>
              </li>

              <li>
                <a href="tel:13922547840" class="icon-tel"> 13911111111 禤先生</a>
              </li>

              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                  aria-expanded="false">微信二维码 <span class="caret"></span></a>
                <ul class="dropdown-menu qrCode">
                  <li>
                    <img src="./img/logo.png">
                  </li>
                </ul>
              </li>

            </ul>
 


        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

#menu {
    text-align: center;
}

.navbar-nav {
    display: inline-block;
    float: none;
    text-align: center;
}

.navbar-nav li {
    display: block;
}

项目地址：https://gitee.com/xuan168/bootstrapNav.git

效果图：