引导程序4中导航栏右侧的折叠按钮 [英] Collapse button on right side of navbar in bootstrap 4

问题描述

我使用引导程序4创建了导航栏，并进行了以下更改

1. 在右侧设置了折叠按钮


2. 将品牌名称放在折叠区域外面，以便它始终位于左侧

以下是详细代码

 < nav class =navbar navbar-dark bg-danger> 
< a class =navbar-brandhref =＃> Navbar< / a> 
< button class =navbar-toggler hidden-lg-up float -xs-righttype =buttondata-toggle =collapsedata-target =＃navbarResponsivearia-controls =navbarResponsive aria-expanded =falsearia-label =切换导航>< / button> 
< div class =collapse navbar-toggleable-mdid =navbarResponsive> 
< ul class =nav navbar-nav float-md-right> 
< li class =nav-item active> 
< a class =nav-linkhref =＃>主页< span class =sr-only>（current）< / span>< / a> 
< / li> 
< li class =nav-item> 
< a class =nav-linkhref =＃>连结< / a> 
< / li> 
< li class =nav-item> 
< a class =nav-linkhref =＃>连结< / a> 
< / li> 
< li class =nav-item dropdown> 
< a class =nav-link dropdown-togglehref =http://example.comid =responsiveNavbarDropdowndata-toggle =dropdownaria-haspopup =truearia-expanded = 假 >下拉< / A> 
< div class =dropdown-menuaria-labelledby =responsiveNavbarDropdown> 
< a class =dropdown-itemhref =＃>动作< / a> 
< a class =dropdown-itemhref =＃>另一个动作< / a> 
< a class =dropdown-itemhref =＃>其他东西在这里< / a> 
< / div> 
< / li> 
< / ul> 
< / div> 
< / nav> 
  

我在点击汉堡包图标时遇到了问题，因为它没有正确显示我的折叠菜单。

我不知道我在哪里犯错。

这是笔

你必须将按钮和标题封装在div中，并在其中放入 class =clearfix-xs。像这样

 < div class =clearfix-xs> 
< a class =navbar-brandhref =＃> Navbar< / a> 
< button class =navbar-toggler hidden-lg-up float -xs-righttype =buttondata-toggle =collapsedata-target =＃navbarResponsivearia-controls =navbarResponsive aria-expanded =falsearia-label =切换导航> 
< / button> 
< / div> 
  

和css为这个clss是：

  @media（max-width：768px）{。clearfix-xs：after {
 visibility：hidden; 
 display：block; 
 font-size：0; 
 content：; 
明确：两者; 
 height：0; 
 
 
  

这里有一个笔

I am creating navbar using bootstrap 4 and made following changes

1. set the Collapse button on right side
2. Took the BrandName outside the collapse area so that its always there on Left side

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.

Here is the Pen

解决方案

you have to wrap the button and heading in a div and put class="clearfix-xs" in it. 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 clss is:

@media(max-width:768px){.clearfix-xs:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
}

here's a pen

这篇关于引导程序4中导航栏右侧的折叠按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！