css 버튼 - 부트 스트랩 4는 navbar 항목을 오른쪽으로 정렬합니다.




가운데 메뉴 (16)

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

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

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

  • <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> 클래스에 pull-sm-right 클래스를 추가 pull-sm-right
  • <li> align-content-end 클래스를 추가했습니다.

이것은 내 코드입니다.

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

Answers

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

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

내 경우에는 한 세트의 탐색 버튼 / 옵션 만 있으면 좋겠다.

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

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

다음은 작동하는 예제 입니다.


부트 스트랩 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>

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>

귀하의 nav-brand 직후 왼쪽에 Home, Features 및 Pricing을 원한 다음 오른쪽에 로그인하여 등록한 다음 <div> 에 두 개의 목록을 감싸고 .justify-content-between .

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

부트 스트랩 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 유틸리티도 있습니다. 이 경우에는 navbar-nav 가 2 개 있으므로 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


위의 것보다 훨씬 잘 작동하는 출시 된 버전 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> 

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>

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


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

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


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


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

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

부트 스트랩 플렉스 박스를 사용하면 네비게이션 요소의 배치와 정렬을 제어 할 수 있습니다. 위의 문제는 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

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


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

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

이 스크립트로 bootstrap.js를 덮어 씁니다.

jQuery(document).ready(function ($) {
$('.navbar .dropdown').hover(function() {
    $(this).addClass('extra-nav-class').find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
    var na = $(this)
    na.find('.dropdown-menu').first().stop(true, true).delay(100).slideUp('fast', function(){ na.removeClass('extra-nav-class') })
});

$('.dropdown-submenu').hover(function() {
    $(this).addClass('extra-nav-class').find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
    var na = $(this)
    na.find('.dropdown-menu').first().stop(true, true).delay(100).slideUp('fast', function(){ na.removeClass('extra-nav-class') })
});

}); 




css twitter-bootstrap flexbox bootstrap-4