[css] 부트 스트랩 4 네비게이션 바 항목을 오른쪽에 정렬

탐색 표시 줄 항목을 오른쪽에 어떻게 정렬합니까?

로그인하고 오른쪽에 등록하고 싶습니다. 그러나 내가 시도하는 모든 것이 작동하지 않는 것 같습니다.

이것이 내가 지금까지 시도한 것입니다.

<div>주위에 <ul>찬사와 함께 :style="float: right"
<div>주위에 <ul>찬사와 함께 :style="text-align: right"
<li>태그 에서 그 두 가지를 시도
!important끝에 추가하여 모든 것을 다시 시도하십시오.
변경 nav-item에 nav-right에<li>
에 pull-sm-right수업을 추가<li>
에 align-content-end수업을 추가<li>

이것은 내 코드입니다.

<div id="app" class="container">
  <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" 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>
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="navbar-nav">
      <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="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricingg</a>
      </li>
    </ul>
    <ul class="navbar-nav " >
      <li  class="nav-item">
        <a class="nav-link" href="{{ url('/login') }}">Login</a>
      </li>
      <li  class="nav-item">
        <a class="nav-link" href="{{ url('/register') }}">Register</a>
      </li>
    </ul>
  </nav>
  @yield('content')
</div>

답변

부트 스트랩 4 에는 탐색 모음 항목을 정렬하는 여러 가지 방법이 있습니다 . float-right탐색 표시 줄이 이제이므로 작동하지 않습니다 flexbox.

첫 번째 (왼쪽) mr-auto자동 오른쪽 여백에 사용할 수 있습니다 .
또한 , 온 사용될 수 2 (오른쪽) 당신은 단지 하나가있는 경우, 또는 .navbar-navml-autonavbar-navnavbar-nav

<nav class="navbar navbar-expand-md navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav mr-auto">
            <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="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
            </li>
        </ul>
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="{{ url('/login') }}">Login</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{{ url('/register') }}">Register</a>
            </li>
        </ul>
    </div>
</nav>

https://codeply.com/go/P0G393rzfm

flexbox 유틸리티도 있습니다. 이 경우, 당신이 개 가지고 navbar-nav들, 그래서 justify-content-between에서가 navbar-collapse그들 사이에도 공간을 작동합니다,

 <div class="navbar-collapse collapse justify-content-between">
     <ul class="navbar-nav mr-auto">
               ..
     </ul>
     <ul class="navbar-nav">
           ..
     </ul>
 </div>

Bootstrap 4.0 이상 업데이트

Bootstrap 4 베타 ml-auto부터는 항목을 오른쪽으로 밀기 위해 계속 작동합니다. navbar-toggleable-수업이 바뀌 었다는 것을 명심하십시오.navbar-expand-*

부트 스트랩 4에 대한 업데이트 된 탐색 모음

또 다른 빈번한 Bootstrap 4 Navbar 오른쪽 정렬 시나리오에는 오른쪽에 버튼이 포함되어있어 모바일 축소 탐색 외부에 남아 있으므로 항상 모든 너비로 표시됩니다.

항상 보이는 오른쪽 맞춤 버튼

답변

필자의 경우 하나의 탐색 버튼 / 옵션 세트 만 원했고 이것이 작동한다는 것을 알았습니다.

<div class="collapse navbar-collapse justify-content-end" id="navbarCollapse">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Sign Out</a>
    </li>
  </ul>
</div>

따라서 justify-content-enddiv에 추가 mr-auto하고 목록에서 생략 합니다.

다음은 실제 예 입니다.

답변

BS4 에서이 문제로 여전히 어려움을 겪고있는 사람들은 아래 코드를 시도하십시오.

<ul class="navbar-nav ml-auto">

답변

부트 스트랩 4

브랜드를 왼쪽에 맞추고 모든 탐색 모음 항목을 오른쪽에 맞추려면 기본값 mr-auto을ml-auto

<ul class="navbar-nav ml-auto">

답변

에 Bootsrap 4.0.0-beta.2, 여기에 나열된 답변 중 어느 것도 나를 위해 일하지 않았습니다. 마지막으로 Bootstrap 사이트는 문서가 아니라 페이지 소스 코드를 통해 솔루션을 제공했습니다 …

Getbootstrap.com navbar-nav은 다음 클래스의 도움을 받아 오른쪽에 오른쪽 을 맞 춥니 다 ml-md-auto..

답변

justify-content-end를 적용한 후 ml-auto대신에 사용하십시오 .mr-autonavul

답변

이 코드를 사용하여 항목을 오른쪽으로 이동하십시오.

<div class="collapse navbar-collapse justify-content-end">