부트 스트랩 4에서 navbar 링크의 수직 정렬 수정

Question

내 레일 애플리케이션에서 부트 스트랩 4의 .navbar 클래스와 관련된 이상한 문제가 있습니다.

요약하면 navbar를 만들고 있는데 오른쪽에 링크를 추가하려고합니다. the documentation에 따르면 .pull-**-right 클래스는 탐색 모음 내에서 작동하고 오른쪽에 링크가 있어야합니다.

이제 성공적으로 수행됩니다.

<nav class="navbar navbar-full navbar-light" style="background-color: #002b52"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
    <%= link_to "Example", root_path, class: "navbar-brand" %> 
    <%= link_to "About Us", about_path, class: "pull-sm-right navlink" %> 
    </nav> 
    </div> 
</nav> 

그것은 원래 작동하지 않았다, 그래서 .navlink 클래스를 만들어 일부 CSS 추가 : 그러나, 수직 정렬 (왼쪽 navbar-brand 링크가 완벽하더라도) 꺼져

을

.navlink { 
     vertical-align: middle; 
} 

navbar-brand에 추가 CSS 마법이 없더라도 올바른 링크가 수직으로 가운데에 정렬되지 않습니다 (상단에 가깝습니다).

왜 그런지에 대한 아이디어가 있습니까?

Answer 1

당신이 혼합하는 것 같아요. 부트 스트랩 v3 클래스 v12documentation에있는 기본 탐색 구조를 사용하지 않는 경우 (특히 Nav 참조) 그리고 클래스 navbar-header은 v4에 존재하지 않습니다.

이 정보가 도움이되기를 바랍니다.

기본 설정

.navbar 
    a.navbar-brand 
    ul.nav.navbar-nav 
    li.navbar-item 
     a.nav-link 

레일 예 :

<nav class="navbar navbar-full navbar-light"> 

    <%= link_to "Example", root_path, class: "navbar-brand" %> 

    <ul class="nav navbar-nav"> 
    <li class="nav-item pull-sm-right"> 
     <%= link_to "About Us", about_path, class: "nav-link" %> 
    </li> 
    </ul> 

</nav> 

작업 예 :

.navbar { 
 
    background-color: #002b52; 
 
} 
 
.navbar .navbar-nav li > .nav-link, 
 
.navbar a.navbar-brand { 
 
    color: white; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-full navbar-light"> 
 

 
    <a class="navbar-brand" href="#">Example</a> 
 

 
    <ul class="nav navbar-nav"> 
 
    <li class="nav-item pull-sm-right"> 
 
     <a class="nav-link" href="#">About Us </a> 
 
    </li> 
 
    </ul> 
 

 
</nav>

Answer 2

.navbar-brand에는 많은 추가 클래스가 있기 때문입니다. 너는 너의 연결 다른 글꼴 크기 또는 모두를 원하는가 ??

.navbar-brand { 
    float: left; 
    height: 50px; 
    padding: 15px 15px; 
    font-size: 18px; 
    line-height: 20px; 
} 

당신이이 문서에서였다

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button aria-expanded="false" class="navbar-toggle collapsed" 
      data-target="#bs-example-navbar-collapse-6" data-toggle= 
      "collapse" type="button"><span class="sr-only">Toggle 
      navigation</span> <span class="icon-bar"></span> <span class= 
      "icon-bar"></span> <span class="icon-bar"></span></button> 
      <a class="navbar-brand" href="#">Brand</a> 
     </div> 
     <div class="collapse navbar-collapse" id= 
     "bs-example-navbar-collapse-6"> 
      <ul class="nav navbar-nav pull-right"> 
       <li class="active"> 
        <a href="#">Home</a> 
       </li> 
       <li> 
        <a href="#">Link</a> 
       </li> 
       <li> 
        <a href="#">Link</a> 
       </li> 
      </ul> 
     </div> 
    </div> 
</nav> 

후 무엇을하는 링크 떨어져 클래스를 제거하고 클래스 네비게이션 바 브랜드를 떠나거나 워드 프로세서 여기 https://getbootstrap.com/components/#navbar

를 참조하는 내가 연결