부트 스트랩 V4 접을 수있는 내비게이션 맞춤

Question

접을 수있는 메뉴의 정렬과 BS4에 대한 질문이 있습니다. 여기

는 내가 가진 코드입니다 :

<nav class="navbar navbar-light navbar-fixed-top"> 
    <div class="container"> 

    <button type="button" class="navbar-toggler hidden-sm-up pull-xs-right" 
      data-toggle="collapse" data-target=".nav-content"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="#">Test</a> 

    <div class="collapse navbar-toggleable-xs nav-content"> 
     <ul class="nav navbar-nav"> 
     <li class="nav-item"> 
      <a class="nav-link active" href="#">Home</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Leagues</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Login</a> 
     </li> 
     </ul> 
    </div> 
    </div> 
</nav> 

Basic without

문제는 그 메뉴 항목 (붕괴하지 않을 경우) 붕괴시에, 오른쪽으로 정렬을 할 것인지이다 왼쪽이지만 햄버거 버튼과 메인 탐색 아래. BS 3에서 제대로 작동했습니다.

float-xs-right로 시도했지만 제대로 작동하지 않습니다. ** - - 현재 V4 기준으로 오른쪽 (Responsive floats 참조)

With float right

종류와 관련, 크리스

Answer 1

이 버전은 부트 스트랩 4의 사용중인에 따라 구문이 떠 변경 .0.0-alpha.5, Utilities overhaul 아래의이 게시물을 참조하십시오.

navbar-toggler 단추에 대해 반응 형 (부동 소수점) 유틸리티를 사용하면 목록 항목이 그 아래가 아닌 navbar-brand 다음에 나타납니다. 지금 당장 당신은 붕괴를위한 올바른 브레이크 포인트 내에서 부유물을 지워서 직접 처리해야한다고 생각합니다.

예 CSS :

@media (max-width: 574px) { 
    .navbar-header:after, 
    .navbar-header:before { 
     display: table; 
     content: " " 
    } 
    .navbar-header:after { 
     clear: both 
    } 
} 

작업 예 :

@media (max-width: 574px) { 
 
    .navbar-header:after, 
 
    .navbar-header:before { 
 
    display: table; 
 
    content: " " 
 
    } 
 
    .navbar-header:after { 
 
    clear: both 
 
    } 
 
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"> 
 

 
<nav class="navbar navbar-light navbar-fixed-top"> 
 
    <div class="container"> 
 

 
    <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#">BRAND</a> 
 

 
     <button class="navbar-toggler hidden-sm-up float-xs-right" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation"></button> 
 
    </div> 
 

 
    <div class="collapse navbar-toggleable-xs" id="nav-content"> 
 

 
     <ul class="nav navbar-nav float-sm-right"> 
 
     <li class="nav-item"> 
 
      <a class="nav-link" href="#">ABOUT</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
      <a class="nav-link" href="#">BLOG</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
      <a class="nav-link" href="#">LOGIN</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
      <a class="nav-link" href="#">SIGN UP FREE</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 

 
    </div> 
 
</nav> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>