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>