php - Bootstrap Navbar 在不应该的时候崩溃了

Question

我有一个包含导航栏、 Logo 和另一个导航栏的标题页。

在桌面上，第一个导航栏包含右侧的信息，如下所示:

但是当我切换到小屏幕时，它会出现如下所示:

有没有办法改变它，使其在小屏幕上不会折叠？ 如果需要任何 css，是否也可以更改 ID，以便它不会干扰我的其他 NavBar 及其 CSS？

目前我的代码:

<div class="container-fluid">
    <ul class="nav navbar-nav navbar-right">
        <li><a href="register.php"><span class="glyphicon glyphicon-user"> </span> Sign Up</a></li>
        <li><a href = "login.php"><span class = "glyphicon glyphicon-log-in"></span> Login</a></li>
        <li><a href="checkout.php"><span class="glyphicon glyphicon-shopping-cart"></span> <?php echo 'Checkout' ?></a> </li>
    </ul>
</div>

感谢您的帮助!

编辑:

这是我的另一个导航栏，位于我的 Logo 下方，效果很好: 我希望这对您有所帮助。

<div class="container">
            <nav class="navbar navbar-default" role="navigation">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="index.php">Home</a></li>
                        <li><a href="#">Collections</a></li>
                        <li><a href="earth_products.php">Jewellry</a></li>
                        <li><a href="#">Offers</a></li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </nav>

        </div>

此导航栏的 CSS:

.navbar .navbar-nav {
display: inline-block;
float: none;
color: #000000;
}

.navbar .navbar-collapse {
text-align: center;
}

.navbar-default {
background-color: #44B5DB;
border-color: #000000;
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li      > a:focus {
background-color: #FFFFFF;
color: #000000;
}

.navbar-default .navbar-nav > li > a {
color: #000000;
}

我认为显示图片可能更容易。 所以基本上我的 Navbar #1 需要显示:

注册 |登入 |结帐

即使是在小型设备上，而不是一个放在另一个设备上。 根据图片，我当前的设置是:Navbar #1、Logo、Navbar #2

我希望这是有道理的!

Answer 1

您可以通过使用 navbar-default 类作为基础向 upper-navigation div 添加一些定制，使其不会折叠。以及上部和下部导航栏排列(虽然他们不必这样做)。

我还调整了您的 CSS，因此当您将鼠标悬停在链接上时，链接的行高会起作用；现在从底部移除了间隙。

.navbar-default.nav-top {
  background: #fff;
}
.navbar-default.nav-top ul {
  display: inline-block;
  float: right;
}
.navbar-default .navbar-top li {
  float: left;
  font-size: 12px;
}
.navbar.navbar-custom {
  background: #44B5DB;
  border-color: #000000;
}
.navbar.navbar-custom .navbar-nav > li > a {
  color: #000000;
}
.navbar.navbar-custom .navbar-nav > li > a:hover,
.navbar.navbar-custom .navbar-nav > li > a:focus {
  background: #FFFFFF;
  color: #000000;
  width: 100%;
}
.navbar.navbar-custom .navbar-nav {
  text-align: center;
}
@media (min-width: 768px) {
  .navbar.navbar-custom .navbar-nav > li {
    float: none;
    display: inline-block;
  }
  .navbar.navbar-custom .navbar-nav {
    width: 100%;
    text-align: center;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar-default nav-top">
  <div class="container">
    <ul class="nav navbar-top">
      <li><a href="#"><span class="glyphicon glyphicon-user"> </span> Sign Up</a>

      </li>
      <li><a href="#"><span class = "glyphicon glyphicon-log-in"></span> Login</a>

      </li>
      <li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span> <?php echo 'Checkout' ?></a>

      </li>
    </ul>
  </div>
</nav>
<div class="container">
  <nav class="navbar navbar-default navbar-custom">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-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>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-navbar">
      <ul class="nav navbar-nav">
        <li><a href="index.php">Home</a>

        </li>
        <li><a href="#">Collections</a>

        </li>
        <li><a href="earth_products.php">Jewellry</a>

        </li>
        <li><a href="#">Offers</a>

        </li>
      </ul>
    </div>
  </nav>
</div>