Question

第一个问题：

我正在尝试在一行中创建一个导航栏，但是，即使有足够的空间，它也会分成两行。我不想在折扣导航栏崩溃 div中包含登录按钮。

这是我得到的：

第二个问题：

即使用户向下滚动，我希望我的导航栏仍然可见，我添加了 navbar-static-top 类，如下所示：

<nav class="navbar navbar-default navbar-static-top">

但它似乎没有起作用。

任何帮助将不胜感激。提前谢谢。

Answer 1

您已将最后一个按钮放在错误的div中（请参阅****移动到这里****）

 <nav class="navbar navbar-default navbar-fixed-top">

第二个问题的答案

并固定使用navbar-fixed-top

AnySequence

Answer 2

登录按钮应该在导航栏中添加一些元素，例如导航栏标题或容器。比如这样：
通过 navbar-fixed-top 更改 navbar-static-top ：

以下是我更新的JSFiddle：https://jsfiddle.net/Pontual/fsjowxqn/3/

<div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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 class="navbar-brand" href="#">Brand</a>
      <ul class="nav navbar-nav navbar-right">
            <li><button type="button" class="btn btn-info navbar-btn">Sign in</button></li>
          </ul>
        </div>

Answer 3

将navbar-left添加到折叠导航div

＆＃13;

<div class="collapse navbar-collapse navbar-left" id="bs-example-navbar-collapse-1">

＆＃13;

将sign_in类添加到登录按钮父级

＆＃13;

<ul class="nav navbar-nav navbar-right sign_in">

＆＃13;

然后添加以下css

＆＃13;

@media (max-width: 767px) {
  .sign_in {
    position: absolute;
    right: 100px;
    top: -7px;
  }
}

＆＃13;

希望它适用于您的场景

Bootstrap导航栏分为两行问题

3 个答案: