【发布时间】：2014-03-17 20:54:11
【问题描述】：
我正在使用 Bootstrap 3 构建一个响应式菜单，如下所示：
Logo Link 1 Link 2 Link 3 Link 4（缩小以在更小的设备中切换）
以下是这样做的，除非我选择使用更大的徽标图像（440 像素 x 140 像素）时出现两个问题 1）导航菜单项上升到顶部 2）在较小的设备中，徽标似乎没有反应灵敏（不会缩小以适应屏幕）
桌面视图：
移动端视图：
我的目标是 1) 徽标和链接在同一行上垂直对齐 2) 徽标缩小到更小的尺寸以便为导航切换腾出空间
<div class='jumbotron grey-bg'>
<div class='container-fluid'>
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav-bar">
<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="#">My Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="main-nav-bar">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li class='active'><a href='#'>Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href='#'>Link 4</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div><!-- /.container-fluid -->
</div><!--- end jumbotron -->
/* logo */
.navbar-brand {
width: 440px;
height: 140px;
background: url(img/logo.jpg) no-repeat;
text-indent: -999px;
padding: 0px;
margin: 0px;
}
/* end */
/* navigation */
.navbar-default {
border: none;
padding: 0 0 60px 0;
}
.navbar-default .navbar-nav>li>a {
color: #666;
padding: 11px 0;
text-align: center;
}
.navbar-default .navbar-nav>li>a:hover {
text-decoration: underline;
color: #666;
}
/* end */
img {
display: block;
height: auto;
max-width: 100%;
}
【问题讨论】：
-
通过设置固定行高： .navbar-nav li a { line-height: 140px; } stackoverflow.com/questions/19844561/… 但是，我仍然遇到图像没有响应的问题。
标签： javascript html css twitter-bootstrap twitter-bootstrap-3