我怎样才能让我的菜单不会在移动设备中中断？

Question

我正在使用 Bootstrap 4 来创建我的响应式站点，并且我正在使用基于此 Bootstrap documentation 的响应式导航栏组件。导航栏在台式机上运行良好，但在移动设备上却坏了，我不知道为什么。

这就是正在发生的事情：

这是我需要的：

我的代码：

<nav class="navbar navbar-expand-lg nl-navbar navbar-light">
    <a class="navbar-brand" href="#">
        <img src="#" alt="Logo" class="col-lg-7 col-md-6 
        col-sm-5 col-5"/>
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data- 
    target="#navbarTogglerDemo02">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
      <ul class="navbar-nav ml-auto nl-navbar-ul">
        <li class="nav-item active">
            <a class="nav-link mr-3" href="#">Link 1</a>
        </li>
        <li class="nav-item active">
            <a class="nav-link mr-4" href="#">Link 2</a>
        </li>
        <li class="nav-item active">
            <a class="nav-link mr-4" href="#">Link 3</a>
        </li>
        <button class="btn my-2 my-sm-0 nl-btn-nav-secondary" type="button" data- 
        toggle="modal" data-target="#" 
        id="#">Btn Here</button>
      </ul>
    </div>
</nav>

Answer 1

在class="navbar-toggler" 上使用float:right 属性并在nav 标记上应用display:block 属性