ブートストラップ4 navbarのボタンアライメント

Question

ブートストラップナビバーに2つのボタン「ログイン」と「サインアップ」があります。私は、1）大きな画面では水平方向に、2）タブレット/モバイルでは縦方向に全幅に合わせてボタンを表示しようとしています。基本的には、どちらかをやってもらうことはできますが、両者を動かすことはできません。私は "フォームインライン"と行を使用しようとしましたが、その後私の "btn-block-sm-down" CSSクラスはオーバーライドされて動作しません。

ここに私のnavbarです。問題は、％>下

ここ

<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の2つのボタンがデスクトップ上で同じ幅になり、水平に整列され、それがモバイルのために小さい方のビューにあるときには、全幅になり、垂直に整列されます。ここ

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