-1
我試圖建立一個使用Twitter Bootstrap 3的響應式導航欄。現在我是使用Bootstrap的bulit導航欄，而我將在我的導航欄中單獨顯示的小屏幕2 <div>。 這裏是我的代碼裏面的導航標籤div標籤縮小後顯示在twitter引導中的小屏幕尺寸3
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<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=".navbar-collapse" 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 Name
</a>
</div>
<!-- Social Links -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#">Home <span class="sr-only">(current)</span></a></li>
<li><a href="#">About</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><i class="fa fa-google" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-facebook-official" aria-hidden="true"></i></a></li>
<li><a href="#" data-toggle="modal" data-target="#myModal"><i class="fa fa-whatsapp" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</nav>
我複製從Twitter Bootstrap的官方文檔導航欄的代碼。 出了什麼問題請有人幫忙。 在此先感謝
.navbar-default{
font-family: 'Montserrat', sans-serif;
/*background-color: #009999 !important;*/
background: none;
/*border-color: #fff;*/
border: none;
}
.navbar-brand{
margin-top: 16px;
color: transparent !important;
}
.navbar-nav li a{
height: 80px;
line-height: 80px;
padding: 0 25px;
border: none;
}
.navbar-default .navbar-nav>li>a:link{
/*color: #fff;*/
/* color: #f97400;*/
color: rgba(249, 116, 0, 1); /* color #f97400 */
}
.navbar-default .navbar-nav>li>a:hover{
color: #ff0000;
/* background-color: #f97400;*/
border-bottom: #f0ad4e solid 4px; /* to show underline in navabar on mouse hover */
}
.navbar-default .navbar-nav>li>a:visited{
color:rgba(240, 173, 78, 1); /* color #f0ad4e */
}
.navbar-default .navbar-toggle{
border-color: #f0ad4e;
margin-top: 25px;
}
li.google a{
width: 80px;
font-size: 1.8em;
text-align: center;
box-shadow: none;
}
li.twitter a{
width: 80px;
font-size: 1.8em;
text-align: center;
box-shadow: none;
}
li.facebook a{
width: 80px;
font-size: 1.8em;
text-align: center;
box-shadow: none;
}
li.whatsapp a{
width: 80px;
font-size: 1.8em;
text-align: center;
box-shadow: none;
}
li.google a:hover,
li.twitter a:hover,
li.facbook a:hover,
li.whatsapp a:hover{
opacity: .8;
}
@media (max-width: 768px) {
.navbar-default .navbar-nav>li>a{
width: 100%;
text-align: center;
background-color: #fff;
color: #000 !important;
}
.navbar-default .navbar-nav>li>a:hover{
color: #ff0000;
background-color: rgba(249, 116, 0, 1);
border-bottom: #f0ad4e solid 4px; /* to show underline in navabar on mouse hover */
}
.navbar-brand{
font-family: 'Montserrat', sans-serif;
color: #fff !important;
}
}
.navbar-collapse{
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 0px;
}
.navbar-fixed-bottom {
position: relative; /* this can also be static */
}
你有自定義CSS嗎？你可以用這個發佈嗎？ –
發佈您的CSS以及。參見[mcve]和[問]。 – vanburen
@Christiaan Molendijk，我用我的自定義CSS更新了我的問題 – Shashanth