我正在尝试使用bootstrap来制作响应式导航栏。
我想要的是我左侧有徽标，徽标旁边有导航。
我希望每个导航（主页，关于我们，我们的服务，联系我们）具有相同的宽度和流畅性，所以如果我调整屏幕尺寸， 导航栏将调整大小，徽标保持不变。
但每当我尝试将屏幕尺寸调整为更小尺寸时，导航栏就不再在同一行。
正常的屏幕尺寸： 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 但我仍然无法弄清楚出了什么问题。先谢谢！
答案 0 :(得分：1)
这是您可以用来放置图片的CSS （从navbar-brand移除你的img链接并在CSS中替换它）。
.navbar-brand {
width: 220px;
height: 50px;
background: url('http://placehold.it/220x85') no-repeat center center;
background-size: 150px;
}
可以通过CSS和媒体查询的使用来均匀间隔导航栏链接，但要注意，如果需要添加链接，它可能会变得丑陋和复杂。
请参阅代码段。
.navbar {
border-radius: 0px;
border: transparent;
}
.nav li {
width: 150px;
text-align: center;
}
.dropdown-menu li {
text-align: left;
}
.navbar-brand {
width: 220px;
height: 50px;
background: url('http://placehold.it/220x85') no-repeat center center;
background-size: 150px;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px 6px 6px 6px;
border-radius: 0px;
}
.dropdown-submenu:hover > .dropdown-menu {
display: block;
}
.dropdown-submenu > a:after {
display: block;
content: " ";
float: right;
width: 0px;
height: 0px;
border-color: transparent;
border-style: solid;
border-width: 5px 0px 5px 5px;
border-left-color: #cccccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: #ffffff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0px 6px 6px;
-moz-border-radius: 6px 0px 6px 6px;
border-radius: 6px 0px 6px 6px;
}
@media only screen and (max-width: 992px) {
.nav li {
width: auto;
}
}
@media only screen and (max-width: 768px) {
.nav li {
width: auto;
text-align: left;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav role="navigation" class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand"></a>
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a>
</li>
<li><a href="#">Profile</a>
</li>
<li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Messages <b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li><a href="#"><i class="fa fa-envelope-o fa-fw"></i> Inbox</a>
</li>
<li><a href="#"><i class="fa fa-pencil-square-o fa-fw"></i> Drafts</a>
</li>
<li><a href="#"><i class="fa fa-paper-plane-o fa-fw"></i> Sent Items</a>
</li>
<li class="divider"></li>
<li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Trash</a>
</li>
</ul>
</li>
<li><a href="#">Hello</a>
</li>
<li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Things <b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li><a href="#"><i class="fa fa-envelope-o fa-fw"></i> Inbox</a>
</li>
<li><a href="#"><i class="fa fa-pencil-square-o fa-fw"></i> Drafts</a>
</li>
<li><a href="#"><i class="fa fa-paper-plane-o fa-fw"></i> Sent Items</a>
</li>
<li class="divider"></li>
<li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Trash</a>
<li class="dropdown-submenu"> <a tabindex="-1" href="#"><i class="fa fa-hand-o-right fa-fw"></i> Profile</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#"><i class="fa fa-calendar-o fa-fw"></i> Account</a>
</li>
<li><a tabindex="-1" href="#"><i class="fa fa-folder-open-o fa-fw"></i> Users</a>
</li>
<li><a tabindex="-1" href="#"><i class="fa fa-file-o fa-fw"></i> Login</a>
</li>
</ul>
</li>
</li>
</ul>
</li>
</ul>
</div>
</nav>