【发布时间】：2015-07-07 13:03:23
【问题描述】：
我正在尝试使用引导程序来制作响应式导航栏。
我想要的是在左侧有一个徽标，在徽标旁边有导航。
我希望每个导航（主页、关于我们、我们的服务、联系我们）都具有相同的宽度和流畅度，所以如果我调整屏幕大小， 导航栏将调整大小并且徽标保持不变。
但是每当我尝试将屏幕调整为更小的尺寸时，导航栏就不再在同一行了。
正常屏幕尺寸： https://www.dropbox.com/s/bl9s3m6ph79vrq0/1.PNG?dl=0
较小的屏幕尺寸（导航与徽标不在同一行）：https://www.dropbox.com/s/55cu1xyfi37rrp2/2.PNG?dl=0
css
.navbar-brand{
padding-top: 0;
padding-left: 0px;
padding-right: 15px;
width: 18%;
}
.navbar-header{
display: block;}
ul{
padding-top: 60px;
}
.navbar-nav{
width: 80%;
}
.nav li{
display: block;
width: 25%;
text-align: center;
}
#logo_img{
width: 220px;
}
html
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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" href="#"><img id="logo_img" width="220" src="Assets/logo.png"></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Our Services <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Videography</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Training</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
</div><!--end of collapse-->
</div><!--end of container fluid-->
</nav>
我已经在这里找到了与我相同的情况Bootstrap logo on same line as navbar items 但我仍然无法弄清楚出了什么问题。之前谢谢！
【问题讨论】：
-
您使用的徽标有多大，220px 宽 + ???高度？问题的一些屏幕截图以及您想要的内容也会有所帮助。文字描述不是很清楚。
-
我已经添加了图片。标志是 220px * 85px
标签： twitter-bootstrap navbar fluid