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


341

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

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

Navbar의 사진

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

  • <div>주위에 <ul>찬사와 함께 :style="float: right"
  • <div>주위에 <ul>찬사와 함께 :style="text-align: right"
  • <li>태그 에서 그 두 가지를 시도
  • !important끝에 추가하여 모든 것을 다시 시도하십시오.
  • 변경 nav-itemnav-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>

Navbar는 alpha 6 버전의 flexbox로 제작되었습니다.
최대

1
예, 오른쪽에 맞추려면 어떻게해야합니까? 나는 이미 운이없는 몇 flexbox 일을 시도했습니다. : /
Luuk Wuijster

답변:


530

부트 스트랩 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 오른쪽 정렬 시나리오에는 오른쪽에 버튼이 포함되어있어 모바일 축소 탐색 외부에 남아 있으므로 항상 모든 너비로 표시됩니다.

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

여기에 이미지 설명을 입력하십시오

여기에 이미지 설명을 입력하십시오


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


1
mr-auto가장 오른쪽 항목이 인 경우 작동하지 않습니다 dropdown. 드롭 다운 항목이 페이지 오른쪽 가장자리에 쏟아집니다.
Ege Ersoz

6
작동합니다 : codeply.com/go/P0G393rzfm- 문제는 mr-auto올바른 작동 방법에 관한 질문이 아닙니다 . 드롭 다운과 관련하여 문제가있는 경우 새 질문을 게시하십시오. 그러나이 문제를 가장 많이 언급하고있는 것은 stackoverflow.com/questions/43867258/…
Zim

2
.dropdown-menu-right탐색 모음에서 오른쪽 맞춤 드롭 다운에 추가 할 수도 있습니다 . 그렇지 않으면 특정 폭에서 드롭 다운을 차단할 수 있습니다.
rybo111

@ZimSystem 귀하의 답변에 감사드립니다. 나는 여기에 당신의 대답을 따르고 있습니다 stackoverflow.com/questions/19733447/… . 왼쪽에 하나의 항목을, 오른쪽에 하나의 항목을 어떻게 얻을 수 있습니까?
Lokesh Pandey

에서 codeply.com/go/P0G393rzfm , 당신은 왼쪽에 하나 개의 UL 및 오른쪽에 하나 개의 UL을 표시했습니다. 그것은 mr-auto 를 첫 번째 에 추가함으로써 달성되었습니다 . 하지만 내가 하나의 ul 만 가지고 있다면 어떨까요? 다른 하나를 오른쪽에 맞추기 위해 빈 ul을 만들고 싶지 않습니다.
Santosh Kumar

140

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

<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하고 목록에서 생략 합니다.

다음은 실제 예 입니다.


3
@numediaweb OPs 예제에서 그는 네비게이션 내에서 두 요소를 사용하여 하나의 왼쪽과 오른쪽을 정렬합니다. 여기서는 하나만 사용하고 오른쪽으로 정렬했습니다. 그것은 정답은 아니지만 질문의 약간의 변화에 대한 답변으로 도움)
크레이그 밴 퇴 네르

단일 navbar-nav에서 작동하지만이 mr-auto방법Bootstrap docs 에서 사용됩니다 .
Zim

mr-auto문서에서는 사용되지만 항목을 왼쪽에 정렬하지는 않습니다. 이 답변은이 기사에서 언급 한 바와 같이 의미 적으로 정확합니다 : blog.getbootstrap.com/2017/01/06/bootstrap-4-alpha-6
qwaz

문제는 2 개의 링크 목록 또는 1을 정렬하려고하는 것입니다. 1 인 경우 답변이 효과가 있으며 매우 도움이되었습니다. 감사!
barefootsanders

그것은 나를 위해 일했지만, 왜이 답변 위의 것이 효과가 없는지 모르겠습니다.
Suhail Akhtar

59

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

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

7
아니요-모든 것을 오른쪽에 맞 춥니 다. 문제는 단 하나의 항목 만 오른쪽에 맞추기를 원한다고 말합니다.
NickG

2
m*-auto수업 장소에 따라 콘텐츠를 왼쪽이나 오른쪽으로 밀어 넣는 것에 대한 공식 문서를 확인하십시오.
Pierre de LESPINAY

@PierredeLESPINAY, 예, ml-auto내용을 가장 오른쪽으로 푸시하지만 왜 일을 mr-0할 수 없는지 궁금했습니다 .
아보카도

42

부트 스트랩 4

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

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

32

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

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


1
나를 위해 아름답게 일했습니다. 다른 일은 없었습니다.
Maria Campbell


9

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

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

1
메뉴가 축소되면 작동하지 않지만 ml-auto를 사용하면 메뉴가 축소 되어도 <li> 항목의 너비가 100 %이므로 여백이 적용되지 않기 때문에 여전히 작동합니다.
Ryan S

8

의 바로 다음에 왼쪽에 홈, 기능 및 가격을 표시 nav-brand한 다음 오른쪽에 로그인하여 등록한 다음 두 목록을 래핑하여 <div>사용하십시오 .justify-content-between.

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

7

mr-auto클래스를 추가하십시오 ul.

<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>

5

flex-row-reverse 클래스를 사용하십시오.

<nav class="navbar navbar-toggleable-md navbar-light">
    <div class="container">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
          aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">
            <i class="fa fa-hospital-o fa-2x" aria-hidden="true"></i>
        </a>
        <div class="collapse navbar-collapse flex-row-reverse" id="navbarNavAltMarkup">
            <ul class="navbar-nav">
                <li><a class="nav-item nav-link active" href="#" style="background-color:#666">Home <span class="sr-only">(current)</span></a</li>
                <li><a class="nav-item nav-link" href="#">Doctors</a></li>
                <li><a class="nav-item nav-link" href="#">Specialists</a></li>
                <li><a class="nav-item nav-link" href="#">About</a></li>
            </ul>
        </div>
    </div>
</nav>

2

부 스트랩 4에서는 약간의 변화가 있습니다. 탐색 막대를 오른쪽에 맞추려면 두 가지만 변경하면됩니다. 그들은:

  1. 에서 navbar-nav클래스 추가 w-100로는 navbar-nav w-100100로 폭 만들려면
  2. nav-item dropdown클래스 에서 여백을 자동으로 남겨 두려면 ml-autoas nav-item dropdown ml-auto를 추가하십시오 .

이해가되지 않으면 첨부 한 이미지를 참조하십시오.

코드 펜 링크

여기에 이미지 설명을 입력하십시오

전체 소스 코드

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <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 w-100">
      <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>
      <li class="nav-item dropdown ml-auto">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>  
  </div>
</nav>

2

부트 스트랩 4.3.1의 경우 nav-pills를 사용하고 있었고 이것을 제외하고는 아무것도 효과가 없었습니다.

    <ul class="nav nav-pills justify-content-end ml-auto">
    <li ....</li>
    </ul>


0

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>

0

Bootstrap 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>

0

부트 스트랩 플렉스 박스를 사용하면 탐색 요소의 배치 및 정렬을 제어 할 수 있습니다. 위의 문제에 대해 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

0

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>

0

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


-1

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);
}


-2

위의 것보다 훨씬 잘 작동하는 릴리스 버전 4의 getbootstrap 페이지 중 하나에서 이것을 복사했습니다.

<div class="d-none d-xl-block col-xl-2 bd-toc float-md-right">
    <ul class="section-nav">
         <li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
         <li class="toc-entry toc-h2"><a href="#classes">Classes</a></li>
         <li class="toc-entry toc-h2"><a href="#mixins">Mixins</a></li>
         <li class="toc-entry toc-h2"><a href="#responsive">Responsive</a></li>
    </ul>
</div> 

-3

오버플로를 처음 접했고 프론트 엔드 개발을 처음 접했습니다. 이것이 나를 위해 일한 것입니다. 그래서 목록 항목을 표시하고 싶지 않았습니다.

.hidden {
  display:none;
  } 
  
 #loginButton{
 
 margin-right:2px;
 
 }
<nav class="navbar navbar-toggleable-md navbar-light 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="#">NavBar</a>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active hidden">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item hidden">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item hidden">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit" id="loginButton"><a href="#">Log In</a></button>
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit"><a href="#">Register</a></button>
    </form>
  </div>
</nav>

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.