0
我創建了一個使用引導主題的簡單網站。Bootstrap Navbar陷入響應模式
我已經在其中創建了一個導航欄。
導航欄在響應模式下摺疊，但它粘在頁面的右側，迫使我水平滾動以單擊下拉菜單。
究竟什麼是錯在這裏？
.navbar-default {
background-color: white;
border-color: rgba(34, 34, 34, 0.05);
font-family: Roboto, Arial, sans-serif;
-webkit-transition: all 0.35s;
-moz-transition: all 0.35s;
transition: all 0.35s;
}
.navbar-default .navbar-header .navbar-brand {
color: #424242;
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
font-weight: 700;
text-transform: uppercase;
}
.navbar-default .navbar-header .navbar-brand:hover,
.navbar-default .navbar-header .navbar-brand:focus {
color: #424242;
}
.navbar-default .navbar-header .navbar-toggle {
font-weight: 700;
font-size: 12px;
color: #424242;
text-transform: uppercase;
}
.navbar-default .nav > li > a,
.navbar-default .nav > li > a:focus {
text-transform: uppercase;
font-weight: 700;
font-size: 13px;
color: #424242;
}
.navbar-default .nav > li > a:hover,
.navbar-default .nav > li > a:focus:hover {
color: #424242;
}
.navbar-default .nav > li.active > a,
.navbar-default .nav > li.active > a:focus {
color: #424242 !important;
background-color: transparent;
}
.navbar-default .nav > li.active > a:hover,
.navbar-default .nav > li.active > a:focus:hover {
background-color: transparent;
}
@media (min-width: 768px) {
.navbar-default {
background-color: transparent;
border-color: rgba(255, 255, 255, 0.3);
}
.navbar-default .navbar-header .navbar-brand {
color: #FFFFFF;
}
.navbar-default .navbar-header .navbar-brand:hover,
.navbar-default .navbar-header .navbar-brand:focus {
color: white;
}
.navbar-default .nav > li > a,
.navbar-default .nav > li > a:focus {
color: #FFFFFF;
}
.navbar-default .nav > li > a:hover,
.navbar-default .nav > li > a:focus:hover {
color: white;
}
.navbar-default.affix {
background-color: white;
border-color: #424242;
}
.navbar-default.affix .navbar-header .navbar-brand {
color: #424242;
font-size: 14px;
}
.navbar-default.affix .navbar-header .navbar-brand:hover,
.navbar-default.affix .navbar-header .navbar-brand:focus {
color: #424242;
}
.navbar-default.affix .nav > li > a,
.navbar-default.affix .nav > li > a:focus {
color: #424242;
}
.navbar-default.affix .nav > li > a:hover,
.navbar-default.affix .nav > li > a:focus:hover {
color: #424242;
}
}<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.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- 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-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="#page-top" style="padding-top:0px">
<img style="width:150px;height:50px" src="img/logo.png">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right" style="font-family:Roboto">
<li>
<a class="page-scroll" href="#aboutg" style="text-transform:capitalize">About G-Suite</a>
</li>
<li>
<a class="page-scroll" href="#portfolio" style="text-transform:capitalize">About Us</a>
</li>
<li>
<a class="page-scroll" href="#gform" style="text-transform:capitalize">Enquiry</a>
</li>
<li>
<a class="page-scroll" href="#pricing" style="text-transform:capitalize">Pricing</a>
</li>
<li>
<a class="page-scroll" href="#contact" style="text-transform:capitalize">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
下拉式切換應該是哪裏？ – Pingbeat
你能提供你的網站或工作小提琴的鏈接嗎？調試會更容易。 –
我編輯了這篇文章，以便我們可以運行您提供的代碼片段，但不會顯示您看到的錯誤。你可以添加一個最小的代碼片段到HTML來顯示問題是什麼？ – redbmk