问题与引导3媒体移动显示导航栏

问题描述:

我想弄清楚为什么我对各种导航栏资产的填充和保证金属性的更改未能允许菜单在移动设备上正确调整大小。问题与引导3媒体移动显示导航栏

的jsfiddle是https://jsfiddle.net/phobrla/b9zpbejg/

Screenshot


<html> 
<nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header">  

    <!-- Collect the nav links, forms, and other content for toggling --> 
     <ul class="nav navbar-nav"> 
     <li><a href="#">The Burkean<br/>Pentad</a></li> 
     <li class="active"><a href="#">Intro <span class="sr-only">(current)</span></a> </li> 
     <li><a href="#">Act</a></li> 
     <li><a href="#">Scene</a></li> 
     <li><a href="#">Agent</a></li> 
     <li><a href="#">Agency</a></li> 
     <li><a href="#">Purpose</a></li> 
     <li><a href="#">Quiz</a></li> 
     </ul> 
</div> 
    <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container-fluid --> 
</nav> 
</html> 

缠得.navbar - 反向.navbar默认

商祺!

JSFIDDLE

.navbar-outer .navbar-default{ 
    background:red; 
} 

<div class="navbar-outer"> 
<nav class="navbar navbar-default">