부트 스트랩 4 네비게이션의 버튼 정렬

Question

부트 스트랩 탐색 바에 2 개의 "로그인"및 "가입"버튼이 있습니다. 나는 1) 큰 화면에서 수평으로 정렬하고 2) tabletts \ mobile에서 전체 너비로 세로로 정렬하도록 단추를 가져 오려고합니다. 기본적으로 나는 하나 또는 다른 것을 할 수 있지만 둘 다 작동시킬 수는 없다. "form-inline"과 행을 사용하려고했지만 "btn-block-sm-down"CSS 클래스가 재정의되고 작동하지 않을 것입니다.

여기가 내 탐색 모음입니다. 문제는 %> 바닥

여기

<div class="homepage_nav"> 

<nav class="navbar navbar-expand-lg navbar-light bg-white sticky-top"> 
    <%= link_to 'Navbar', static_pages_home_path, class: "navbar-brand" %> 
    <button class="navbar-toggler" 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> 

    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
    <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 dropdown"> 
     <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      Employers 
     </a> 
     <div class="dropdown-menu" aria-labelledby="navbarDropdown"> 
     </div> 
     </li> 
    </ul> 

    <!--right menu--> 
    <ul class="navbar-nav navbar-right"> 

    <% if current_user %> 
     <li class="nav-item dropdown"> 
     <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      <i class='glyphicon glyphicon-user'></i> <%= current_user.first_name.capitalize %> <span class="caret"></span> 
     </a> 
     <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown"> 
      <%= link_to raw("<i class='glyphicon glyphicon-user'></i> Profile"), current_user, class: "dropdown-item" %> 
      <%= link_to raw("<i class='fa fa-cog' aria-hidden='true'></i> Settings"), current_user, class: "dropdown-item" %> 
      <%= link_to raw("<i class='fa fa-question-circle' aria-hidden='true'></i> Help"), current_user, class: "dropdown-item" %> 
      <div class="dropdown-divider"></div> 
      <%= link_to raw("<i class='fa fa-bug' aria-hidden='true'></i> Report Bug"), new_bug_path, class: "dropdown-item" %> 
      <%= link_to raw("<i class='fa fa-gift' aria-hidden='true'></i> Request Feature"), current_user, class: "dropdown-item" %> 
      <div class="dropdown-divider"></div> 
      <%= link_to raw("<i class='glyphicon glyphicon-log-out'></i> Sign Out"), session_path, method: :delete, class: "dropdown-item", id: "signout-user" %> 
     </div> 
     </li> 

    <% else %> 
    <div class=""> 
    <li><%= link_to "Sign Up", new_user_url, class: "btn btn-outline-success mr-2 btn-block-sm-down" %></li> 
    <li><%= link_to "Login", new_session_url, class: "btn btn-outline-success btn-block-sm-down" %></li> 
    </div> 

    <% end %> 

    </ul><!--./navbar-right--> 

    </div><!--./navbar-collapse--> 
    </nav><!--./nav--> 
</div><!--./homepage_nav--> 

의 네비게이션 바 오른쪽 섹션에 제가 모바일 장치에서 BTN 블록을 만들기 위해 사용하고있어 CSS이야 그렇지 않으면 <%에

// sm devices and lower 
    @include media-breakpoint-down(sm) { 

    .btn-block-sm-down { 
     display: block; 
     width: 100%;   
    } 

    } 

Answer 1

OK는 알아 냈어. navbar에있는 두 개의 버튼이 데스크톱에서 동일한 너비로 수평 적으로 정렬 된 다음 모바일 용으로 더 작은 뷰에있을 때 전체 너비로 세로로 정렬됩니다. 여기

// sm devices and lower 
    @include media-breakpoint-down(sm) { 

    .btn-width { 
     display: block; 
     width: 100%; 
     margin-bottom: 5px; 
    } 

    } 

    // sm devices and higher 
    @include media-breakpoint-up(sm) { 

    .btn-width { 
     width: 80px;   
    } 

    } 

는 네비게이션 바의 섹션의

<% else %> 
     <div class='float-right'> 
     <%= link_to "Join", new_user_path, class: "btn btn-outline-primary btn-block-sm-down btn-width" %> 
     <%= link_to "Login", new_session_path, class: "btn btn-outline-primary btn-block-sm-down btn-width" %> 
     </div>  

    <% end %> 

    </ul><!--./navbar-right-->