引导3-导航条品牌响应不起作用
引导3-导航条品牌响应不起作用
提问于 2017-09-12 08:39:29
我的品牌形象是408 pxx130。导航在浏览器中看起来是正确的，但我不能让它在移动上作出响应。此外，菜单按钮也不会出现。这是我的肚脐
<nav class="navbar default-nav">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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 alt="#{site_title}" src="/images/logo_white.png" /></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav nav-pills navbar-right">
<li><a href="/faq">1</a></li>
<li><a href="/about">2</a></li>
<li><a href="/contacts">3</a>
</li>
<li></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="loginButton">Accedi</a>
<ul id="login-dp" class="dropdown-menu">
<li>
<div class="row">
<div class="col-md-12">
<form action="/" method="post" class="form">
<div class="form-group">
<label class="sr-only" for="form-username">Username</label>
<input type="text" id="username" name="email" placeholder="Email..." class="form-username form-control" />
</div>
<div class="form-group">
<label class="sr-only" for="form-password">Password</label>
<input type="password" name="password" placeholder="Password..." class="form-password form-control" id="password" />
<div class="help-block text-right">
<a href="/resetPassword"> <span class="login-link">Password dimenticata?</span>
</a>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block">Login</button>
</div>
<div class="checkbox">
<label> <input type="checkbox" id="rememberme" name="remember-me" /> <span>Ricordami</span>
</label>
</div>
</form>
</div>
<div class="bottom text-center">
<span>Non sei iscritto?</span> <a class="login-link" href="/register"><strong>Registrati</strong></a>
</div>
</div>
</li>
</ul></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>样式是纯引导css的。
navbar {
min-height: 130px;
line-height: 130px;
z-index: 1;
height: 130px;
}我需要把导航装置与品牌形象高度相匹配。
问题是，当我使用手机，品牌形象没有反应，所以菜单按钮没有出现，标志得到所有的屏幕.
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-09-12 09:21:29
从技术上讲，nav按钮仍然存在，但是由于nav元素没有.navbar-default类，所以它没有继承Bootstrap的样式。您可以通过添加以下内容来解决这个问题：
CSS
.navbar-toggle {
border-color: #ddd;
top: 37px;
}
.navbar-toggle .icon-bar {
background-color: #888;
}您还需要添加jQuery和Bootstrap，以启用菜单的导航开关
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>要修复图像，您需要执行以下操作(样式可能需要根据您需要它的外观进行调整)
您可以将.navbar-brand的高度设置为auto，并从.navbar中移除高度。另外，将其box-sizing更改为content将允许图像位于元素的填充中。然后，需要将.img-responsive类添加到徽标图像元素中。
CSS
.navbar-brand {
box-sizing: content-box;
height: auto;
}
@media (max-width: 767px) {
.navbar-brand {
max-width: 15em;
}
}
/* Optional to replace line-height centering */
@media (min-width: 768px) {
.nav {
position: relative;
top: 60px; /* ( .navbar height / 2 ) - ( #navbar height / 2 ) */
}
}<!-- Add img-responsive class to your logo -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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 alt="#{site_title}" src="http://2.228.86.3:8080/images/quipark_logo_white.png" class="img-responsive" />
</a>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46171713
复制相关文章
相似问题
腾讯云开发者
