css - 사이드메뉴 - 부트스트랩 오른쪽 정렬




부트 스트랩 4는 navbar 항목을 오른쪽으로 정렬합니다. (12)

탐색 모음 항목을 올바르게 정렬하려면 어떻게합니까?

로그인하고 오른쪽에 등록하고 싶습니다. 하지만 내가 시도하는 모든 것은 효과가없는 것 같습니다.

이것은 내가 지금까지 시도한 것이다 :

  • <div> <ul> <div> 주위의 <div> 를 atribute : style="float: right"
  • <div> <ul> <div> 주위의 <div> 태그는 atribute : style="text-align: right"
  • <li> 태그에서 두 가지를 시도했습니다.
  • 그 모든 것을 다시 시도했습니다 !important
  • <li> nav-itemnav-right 로 변경 nav-right .
  • <li>
  • <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>

BS v4.0.0-beta.2 의 작업 예제 :

<body>
    <nav class="navbar navbar-expand-md navbar-dark bg-dark">
      <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">
        <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="#">Pricingg</a>
          </li>
        </ul>
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#">Login</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Register</a>
          </li>
        </ul>
      </div>
    </nav>


    <div class="container-fluid">
      container content
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  </body>

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

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

ul에 mr-auto class를 추가하십시오.

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

양쪽에 메뉴 목록이 있다면 다음과 같이 할 수 있습니다 :

<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="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>
        <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">left 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">left 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">left disable</a>
            </li>
        </ul>

verndor-prefixes.less에서 69 줄을 찾아 다음과 같이 적으십시오.

.panel {
    margin-bottom: 20px;
    height: 100px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}


부트 스트랩 4 베타의 경우 요소가 오른쪽에 정렬 된 샘플 탐색 막대는 다음과 같습니다.

<div id="app" class="container">
  <nav class="navbar navbar-expand-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 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="#">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>
</div>

부트 스트랩 플렉스 박스를 사용하면 네비게이션 요소의 배치와 정렬을 제어 할 수 있습니다. 위의 문제는 mr-auto를 추가하는 것이 더 나은 해결책입니다.

<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 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="#">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>

다른 게재 위치에는

fixed- top
    fixed bottom
    sticky-top

위의 모든 것이 실패하면 CSS의 navbar 클래스에 100 % 너비를 추가했습니다. 그때까지 mr auto는 4.1 프로젝트를 사용하여이 프로젝트에서 저를 위해 일하지 않았습니다.


저는 Angular 4 (v.4.0.0)와 ng-bootstrap (Bootstrap 4)을 실행 중입니다. 이 코드는 모두 관련성이있는 것은 아니지만 희망하는 사람들이 어떤 것을 선택하여 선택할 수 있습니다. 언젠가 올바르게 항목을 정당화하고 적절히 붕괴하고 내 Google (OAuth 사용) 프로필 사진을 드롭 다운하는 해결책을 찾기 위해 언젠가는 필요했습니다.

<div id="header" class="header">
  <nav class="navbar navbar-toggleable-sm navbar-inverse bg-faded fixed-top">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
    <a class="navbar-brand" href="#">
          <img alt='Brand' src='../assets/images/logo-white.png' class='navbar-logo-img d-inline-block align-top '>
          <span class="navbar-logo-text">Oncoscape</span>
        </a>
    <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
      <ul class="navbar-nav float-left">
        <a class="navbar-items nav-item nav-link active " *ngIf='authenticated' (click)='goDashboard()'>
          <span class="fa fa-dashboard"></span>Dashboard
        </a>
        <a class="nav-item nav-link navbar-items active" href="http://resources.sttrcancer.org/oncoscape-contact">
          <span class="fa fa-comments"></span>Feedback
        </a>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <img *ngIf='user && authenticated'  class="navbar-pic" src={{user.thumbnail}} alt="Smiley face">
          </a>
          <div *ngIf='user && authenticated' class="dropdown-menu " aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" (click)="toProfile()">Account</a>
            <div class="dropdown-item">
              <app-login></app-login>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </nav>
</div>
<router-outlet></router-outlet>

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

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

Bootsrap 4.0.0-beta.2 , 여기 나열된 답변 중 아무 것도 나를 위해 일하지 않았습니다. 마지막으로 부트 스트랩 사이트는 솔루션을 제공했지만 문서 소스 코드가 아닌 페이지 소스 코드를 통해 해결책을 얻었습니다.

Getbootstrap.com은 ml-md-auto 클래스를 사용하여 오른쪽 navbar-nav 를 오른쪽 정렬합니다.


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


부트 스트랩 4 에는 여러 가지 방법으로 탐색 표시 줄 항목을 정렬 할 수 있습니다 . navbar가 이제는 flexbox 이기 때문에 float-right 가 작동하지 않습니다.

첫 번째 (왼쪽) navbar-nav 에서 자동 오른쪽 여백을 위해 새로운 mr-auto 를 사용할 수 있습니다. 또는 , ml-auto 두 번째 (오른쪽) navbar-nav 에 사용하거나 하나의 navbar-nav 있습니다.

<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 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="#">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>
</div>

http://www.codeply.com/go/P0G393rzfm

flexbox 유틸리티도 있습니다. 이 경우 2 개의 navbar-nav 가 있으므로 navbar-collapse 에서의 justify-content-between 은 그 사이의 공백까지도 작동합니다.

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

부트 스트랩 4.0 이상에 대한 업데이트

Bootstrap 4 베타 버전에서 ml-auto 는 여전히 항목을 오른쪽으로 밀어 넣습니다. navbar-toggleable- 클래스가 navbar-expand-* 변경되었습니다.

http://www.codeply.com/go/P0G393rzfm 업데이트 된 http://www.codeply.com/go/P0G393rzfm

또 다른 자주 사용되는 Bootstrap 4 Navbar 오른쪽 정렬 시나리오에는 오른쪽에있는 단추가 포함되어 있습니다.이 단추 는 모바일 붕괴 탐색 외부에 있으며 항상 모든 너비로 표시됩니다.

항상 볼 수있는 오른쪽 맞춤 버튼

관련 항목 : 왼쪽, 가운데 또는 오른쪽으로 정렬 된 항목이있는 부트 스트랩 NavBar





navbar