Bootstrap 4 Tastenausrichtung in Navbar

Question

Ich habe 2 Schaltflächen "Login" und "Anmelden" in einer Bootstrap-Navigationsleiste. Ich versuche, die Tasten zu 1) auf einem größeren Bildschirm horizontal auszurichten und 2) vertikal auf Tabletts \ mobile mit voller Breite auszurichten. Im Grunde kann ich es bekommen, um das eine oder andere zu tun, aber kann nicht beide arbeiten. Ich habe versucht, eine "form-inline", und eine Zeile, aber dann meine "btn-Block-sm-down" CSS-Klasse wird übergangen und wird nicht funktionieren.

Hier ist meine Navbar. das Problem ist in dem <% else%> in der Navigationsleiste rechts Abschnitt am unteren

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

hier ist die CSS, dass ich einen BTN-Block auf mobile Geräte machen bin mit

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

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

    } 

Answer 1

OK hat es herausgefunden, es erlaubt zwei Tasten in der Navigationsleiste dieselbe Breite auf einem Desktop zu haben und horizontal ausgerichtet zu sein. Wenn es in einer kleineren Ansicht für Mobilgeräte ist, wird es volle Breite haben und vertikal ausgerichtet sein.

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

    } 

hier ist der Abschnitt der navbar

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