如何防止Navbar链接在最小化时折叠到第二行。

时间:2014-03-07 22:19:09

标签: html5 css3 twitter-bootstrap-3 navbar

当我最小化或平移到较小的屏幕时,我的Navbar链接会折叠成第二行(使用Twitter Bootstrap 3):

enter image description here

Navbar HTML:

<div class=" navbar navbar-default navbar-fixed-top " role="navigation">
  <nav role="navigation">
     <div class="container-fluid">
     <!-- Brand and toggle get grouped for better mobile display -->
       <div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#midnav">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
     </button>
        </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="midnav">
     <ul class="nav navbar-nav">
       <li><a href="/">Link</a></li>
        <li><a href="/">Link</a></li>
         <li><a href="/">Link</a></li>
           <li>Link</li>
            <li>Link</li>
       </ul>
   </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
 </nav>
</div>

我该怎么做才能防止这种情况发生?

我已经玩过#midnav的Max-height(它确实有一个边距 - 试图以全屏模式将链接置于中心位置)

CSS:

#midnav {
 margin-left:295px;
 max-height:53px;
       }

0 个答案:

没有答案