我使用Bootstrap 3.0来显示带有一些链接和搜索字段的导航栏。当我进入“移动的版本”时,我有一个按钮,它可以折叠导航栏并显示所有内容:链接和搜索栏。现在我需要两个按钮,一个只折叠导航栏的链接,另一个只折叠搜索栏。我该怎么做呢?
ql3eal8s1#
将链接和搜索表单分成两个navbar-collapse元素,并使每个按钮指向相应的按钮:示例标记:
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
.navbar-collapse
@media (max-width:767px) { .navbar-nav.navbar-collapse { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } }
这里有一个
1条答案
按热度按时间ql3eal8s1#
将链接和搜索表单分成两个
navbar-collapse
元素,并使每个按钮指向相应的按钮:示例标记:
然后,您只需将以下内容添加到CSS中,以修复
.navbar-nav
和.navbar-collapse
之间的一些冲突样式:这里有一个