我正在使用Bootstrap 3.0展示一个带有链接和搜索字段的导航栏。
当我进入“移动版”时,我有一个按钮可以折叠导航栏并显示所有内容:链接和搜索字段。现在我需要两个按钮,一个按钮只折叠导航栏的链接,另一个按钮只折叠搜索字段。我该怎么做?
我正在使用Bootstrap 3.0展示一个带有链接和搜索字段的导航栏。
当我进入“移动版”时,我有一个按钮可以折叠导航栏并显示所有内容:链接和搜索字段。现在我需要两个按钮,一个按钮只折叠导航栏的链接,另一个按钮只折叠搜索字段。我该怎么做?
navbar-collapse
元素中,并使每个按钮对应相应的元素:<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#search">Toggle search</button>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#links">Toggle links</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<ul class="collapse navbar-collapse nav navbar-nav" id="links">
<!--Links go here-->
</ul>
<div class="collapse navbar-collapse" id="search">
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</nav>
你只需要将以下内容添加到你的CSS中,就可以解决.navbar-nav
和.navbar-collapse
之间的一些样式冲突:
.navbar-nav {
flex-direction: row;
}
.navbar-collapse {
justify-content: flex-end;
}
@media (max-width:767px) {
.navbar-nav.navbar-collapse {
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
}
这里有一个 演示样例
.navbar-nav.navbar-collapse
样式中添加margin-top:0;
和margin-bottom:0;
,否则默认的垂直边距会导致.navbar-nav
关闭时出现轻微跳动。这是一个修改后的fiddle。 - russellb