Question

我尝试使用Twitter Bootstrap为我的网站注册页面创建标题栏。根据{{3}}我想用我的网站名称替换品牌，然后我想在导航的右侧放置一个登录按钮条：

<body>
  <nav class="navbar navbar-default">
      <div class="container-fluid">
          <div class="navbar-header">
            <a href="#" class="navbar-brand">Brand</a>
          </div>
          <button type="button" class="btn btn-default navbar-btn">Sign in</button>
      </div>

      <div class="pull-right">
          <ul class="nav navbar-nav">
              <li><button type="submit" class="btn navbar-btn" >Sign In</button></li>
          </ul>     
      </div>          
  </nav>
</body>

我没有把＃34; navbar-toggle折叠＆＃34;我的代码中的按钮，因为我不希望登录按钮更改为手机上的切换按钮。相反，我想在导航栏的右侧显示一个登录按钮，就像在计算机浏览器中一样。我遇到的问题是，上面的代码会在手机上创建一个高两行（左右）导航栏，左上角有“品牌”链接，右下角有“登录”按钮导航栏。如何更改此代码，以便品牌链接和登录按钮在同一行上彼此对齐？所有显示如何向左或向右移动按钮的示例都假设您要在手机上显示切换按钮。我没有。我希望登录按钮出现在所有设备上。

感谢。

Answer 1

你可能有很多方法可以实现这一目标，但我不认为只要依靠Bootstrap来处理它就可以开箱即用。

简单的解决方案，只需找到登录按钮absolutely。

参见工作示例：

＆＃13;

.navbar .login-btn {
  position: absolute;
  top: 0px;
  right: 15px;
}
@media (max-width: 767px) {
  .navbar .login-btn {
    right: 75px;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
  <div class="container-fluid">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <a href="#" class="navbar-brand">Website Name</a>
    </div>

    <div class="collapse navbar-collapse" id="navbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a>
        </li>
        <li><a href="#">Link</a>
        </li>
      </ul>
    </div>

    <button type="submit" class="btn btn-danger navbar-btn login-btn">Sign In</button>

  </div>
</nav>

＆＃13;

如何在没有切换的情况下右键对齐Bootstrap NavBar中的登录按钮？

1 个答案: