导航栏中的 bootstrap 4 按钮对齐

debugcn 发表于 Dev

random_user_0891

我在引导程序导航栏中有 2 个按钮“登录”和“注册”。我试图让按钮 1) 在大屏幕上水平对齐，2) 在平板电脑\移动设备上垂直对齐全宽。基本上我可以让它做一个或另一个，但不能让它们都工作。我试过使用“表单内联”和一行，但随后我的“btn-block-sm-down”css 类被覆盖并且无法工作。

这是我的导航栏。问题出在底部导航栏右侧部分的 <% else %>

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

  }

random_user_0891

好的明白了，它允许导航栏中的两个按钮在桌面上具有相同的宽度并水平对齐，然后当它在移动设备的较小视图中时，它将全宽并垂直对齐。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。