너무 기초적인지, 의외로 정보가 발견되지 않았기 때문에 투고합니다.

하고 싶은 일

Bootstrap의 Navbar에서,
Home About 등은 왼쪽, Register Login Dropdown 등은 오른쪽에 두고 싶다.



하지만 스마트폰의 햄버거 메뉴에서는 모든 요소를 ​​왼쪽으로 맞추고 싶다.
(넷에서 찾아낸 해결책의 대부분에서는, 스마트폰의 분이라도 오른손잡이가 되어 버려, 슬픈 기분이 되었다.)



가능한 한, 간결하게, 공식 같은 방법으로 하고 싶다.

하는 방법

좌우로 2개의 <ul class="navbar-nav"></ul>로 나누어,
왼쪽 쪽에 mr-auto 클래스를 부여할 뿐.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand " href="/">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">

      <!-- この下の行に mr-auto クラスを付与するだけ -->
      <ul class="navbar-nav mr-auto">　
        <li class="nav-item">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
      </ul>

      <ul class="navbar-nav">
        <li class="nav-item dropdown">
         <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
           Dropdown
         </a>
         <div class="dropdown-menu" aria-labelledby="navbarDropdown">
           <a class="dropdown-item" href="#">Action</a>
           <a class="dropdown-item" href="#">Another action</a>
           <div class="dropdown-divider"></div>
           <a class="dropdown-item" href="#">Something else here</a>
         </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Register</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Login</a>
        </li>
      </ul>

    </div>
  </div>
</nav>

샘플 : htps : // 코데펜. 이오 / 로데 m 준 / 펜 / wXb 키
mr-auto 는 CSS margin-right: auto 같은 효과.
실은, Bootstrap 4로부터는, navbar는, flexbox가 되었기 때문에, margin-right: auto 가 효과가 있다.
반대로 float: right 는 효과가 없습니다.

Dropdown이 화면 밖으로 나오는 문제

가장 오른쪽에 Dropdown을 놓으면 열 때 일부가 화면 밖으로 나간다. (아칸)


<div class="dropdown-menu"></div> 에 dropdown-menu-right 클래스를 부여하여 해결.

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </a>
  <!-- この下の行に dropdown-menu-right を追加するだけ。 -->
  <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</li>

이상입니다.