css - 停止按钮全宽并将导航栏图标保持在左侧

Question

当屏幕尺寸移动到 sm 时，注销按钮宽度占据整个屏幕，导航栏汉堡包图标位于中间:

这是正常情况下的样子:

这是它的代码:

<!-- navbar -->
  <nav class="navbar navbar-toggleable-sm bg-info navbar-inverse">
    <div class="container">
      <button class="navbar-toggler" data-toggle="collapse" data-target="#mainNav">
                 <span class="navbar-toggler-icon"></span>
             </button>
      <div class="collapse navbar-collapse" id="mainNav">
        <div class="navbar-nav">
          <a class="nav-item nav-link active" href="#">Home</a>
          <a class="nav-item nav-link" href="#">About</a>
          <a class="nav-item nav-link" href="#">Training</a>
          <a class="nav-item nav-link" href="#">LOGOUT</a>
        </div>
      </div>
    </div>
  <a href="#" class="btn btn-danger">Logout</a>
  </nav>

Answer 1

检查该代码。有效

@media(max-width:777px){
  .btn-danger{
    max-width:70px!important;
  }
  
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<nav class="navbar navbar-toggleable-sm bg-info navbar-inverse">
    <div class="container">
      <button class="navbar-toggler" data-toggle="collapse" data-target="#mainNav">
                 <span class="navbar-toggler-icon"></span>
             </button>
      <div class="collapse navbar-collapse" id="mainNav">
        <div class="navbar-nav">
          <a class="nav-item nav-link active" href="#">Home</a>
          <a class="nav-item nav-link" href="#">About</a>
          <a class="nav-item nav-link" href="#">Training</a>
          <a class="nav-item nav-link" href="#">LOGOUT</a>
        </div>
      </div>
    </div>
  <a href="#" class="btn btn-danger">Logout</a>
  </nav>

你也可以在 codepen.io 上找到它 https://codepen.io/hansfranz/pen/owmVod

我所做的是设置一个 media Query您可以在此处定义特定 width 的行为。

如果不发表评论，希望对您有所帮助:)