在bootstrap 4中导航栏右侧的折叠按钮

Question

我正在使用bootstrap 4创建导航栏并进行了以下更改

1. 设置右侧的“折叠”按钮
2. 在崩溃区域外取得BrandName，使其始终位于左侧

以下是详细代码

select

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

我不知道我在哪里弄错了。

以下是

Answer 1

你必须包裹按钮并在div中前进并将class="clearfix-xs"放入其中。像这样

<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>

和这个clss的css是：

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

这里是pen