Question

我试图在导航栏崩溃时将其放在中心位置。药片似乎在智能手机视口中以混乱的方式堆叠。你知道如何让药片完全集中在智能手机视口上吗？

这是我的代码：

HTML：

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="row">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar" id="navbar_button">
                    <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" href="#"><img src="img/big-bone.png"></a>
             </div> <!-- End navbar-header-->
             <div class="collapse navbar-collapse" id="navbar">
                 <ul class="nav nav-pills nav">
                    <li class="active"><a href="#">Meet Spot</a></li>
                    <li><a href="#">Training</a></li>
                    <li><a href="#">Gallery</a></li>
                    <li><a href="#">History</a></li>
                 </ul>
             </div>
        </div> <!--end row--> 
    </div> <!--End container fluid-->
</nav>

CSS：

    body{
    padding-top:70px;
    }
    .navbar-default{
     background-color:#3C68D7;
     font-family: helvetica-neue, helvetica, arial, sans-serif;

     }


    .navbar .navbar-collapse{
     text-align:center;


      }

     .nav-pills{
       display:inline-block;
      float:none;
      margin-left:-90px;
       }

      .nav-pills>li>a:hover,
      .nav-pills>li>a:focus
      {

       background-color:#FF9031;
       }


      .nav-pills li{
      margin-top:3px;
      }

       .nav-pills li a {

       font-size:20px;
       background-color:#29CBCF;
        color:white;
       margin-left:6px;
       margin-right:6px;

      }

       p{
       font-family:helvetica-neue;
       }

      .navbar-brand {
     margin-top:-14px;
     }


    #navbar_button{
     background-color:#29CBCF;
     border: 1px solid #29CBCF;
     margin-bottom: 12px;
     margin-top:9px;
     }

     #navbar_button:active{
     background-color: #FF9031;
     border: 1px solid #FF9031;
     }

Answer 1

我会尝试这样的事情：

@media only screen and (max-width : 767px) {
 .nav-pills>li {
  float: none;
  text-align: center;
 }
}

Answer 2

将.nav-stacked添加到ul的{{1}}。

参考：http://getbootstrap.com/components/#nav-pills

如何在bootstrap折叠导航栏中固定药丸？

2 个答案: