[英]Collapse button on right side of navbar in bootstrap 4
I am creating navbar using bootstrap 4 and made following changes我正在使用 bootstrap 4 创建导航栏并进行了以下更改
Here is the detailed code这是详细的代码
<nav class="navbar navbar-dark bg-danger">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler hidden-lg-up float-xs-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
<div class="collapse navbar-toggleable-md" id="navbarResponsive">
<ul class="nav navbar-nav float-md-right">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="responsiveNavbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
I am facing problem while clicking on hamburger icon as its not displaying my Collapsing Menus Properly.我在单击汉堡包图标时遇到问题,因为它没有正确显示我的折叠菜单。
I don't know where I am making mistake.我不知道我哪里出错了。
You have to wrap the button and heading in a div and put class="clearfix-xs"
in it.您必须将按钮和标题包装在一个 div 中,并将class="clearfix-xs"
放入其中。
Like this:像这样:
<div class="clearfix-xs">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler hidden-lg-up float-xs-right" type="button" data-toggle="collapse"
data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
aria-label="Toggle navigation">
</button>
</div>
And css for this class is:这个类的css是:
@media(max-width:768px) {
.clearfix-xs:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.