如何将我的下拉菜单放在移动设备的右侧？

Question

我正在使用 Bootstrap 4 创建一个响应式网站。在桌面上，一切看起来不错。但是，在移动设备中，我的徽标位于中间，菜单位于左侧。这是我的 codepen.

这是我需要实现的目标：

这就是我得到的：

我根据 Bootstrap 的文档使用 this code。

这是我的导航栏代码：

<nav class="navbar navbar-expand-lg nl-navbar navbar-light">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data- 
    target="#navbarTogglerDemo02">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="service-main-landing.html">
        <img src="images/logo-header.svg" alt="Logo Reebit" class="col-lg-7 col-md-4 
        col-sm-7 col-7"/>
    </a>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
            <a class="nav-link mr-3" href="#">Contactar un profesional</a>
        </li>
        <li class="nav-item active">
            <a class="nav-link mr-4" href="#">Registrarme</a>
        </li>
        <li class="nav-item active">
            <a class="nav-link mr-4" href="#">Iniciar sesión</a>
        </li>
        <button class="btn my-2 my-sm-0 nl-btn-nav-secondary" type="button" data- 
      toggle="modal" data-target="#registrationModal" 
      id="landingRegistrationNavBtn">Publicar servicio</button>
      </ul>
      </div>
  </nav>

Answer 1

用 navbar-brand 切换你的 navbar-toggler 位置。

  <a class="navbar-brand" href="#">
    <img src="https://via.placeholder.com/150" class="col-lg-7 col-md-4 col-sm-7 col-7">
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02">
    <span class="navbar-toggler-icon"></span>
  </button>

补充：你好像误会了Bootstrap's grid system。 col 应该是 row 的直接子代，如下所示：

<div class="row">
  <div class="col">
  </div>
  <div class="col">
  </div>
</div>

如何将我的下拉菜单放在移动设备的右侧？

How can I position my dropdown menu to the right in mobile?

html

css

navbar

bootstrap-4