Bootstrap Navbar在不应该的情况下会崩溃

Question

我有一个标题页，其中包含一个导航栏，徽标和另一个导航栏。

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

但是，当我切换到小屏幕时，它显示如下：

有没有办法改变它，使其在小屏幕上不会崩溃？ 如果需要任何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>

感谢您的任何帮助！

编辑：

这是我的另一个导航栏，位于我的徽标下方，可以很好地工作：我希望这会有所帮助。

<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需要显示：

注册| 登录| 查看

即使在小型设备上，也不能在彼此之上。 根据图片，我当前的设置是：导航栏＃1，徽标，导航栏＃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> 

Answer 2

只要确保顶部导航栏中的列表元素在小屏幕上向左浮动即可。 您可能还想将父元素浮动到右侧。

我添加了一些额外的类，因此您不会覆盖默认样式，因为您不想像我建议的那样影响其他导航栏。

我相信你会明白的。

 @import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"); /* Keep list elements floated so they do not collapse */ .navbar-nav>li.top-nav { float: left; } /* keep the ul floated to the right */ .top-nav-right { float: right!important; } .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; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <div class="container-fluid"> <ul class="nav navbar-nav navbar-right top-nav-right"> <li class="top-nav"><a href="register.php"><span class="glyphicon glyphicon-user"> </span> Sign Up</a></li> <li class="top-nav"><a href = "login.php"><span class = "glyphicon glyphicon-log-in"></span> Login</a></li> <li class="top-nav"><a href="checkout.php"><span class="glyphicon glyphicon-shopping-cart"></span> <?php echo 'Checkout' ?></a> </li> </ul> </div> <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>