Bootstrap樣式下拉菜單
[英]Bootstrap styling dropdown menu
問題描述
我目前正在使用引導導航欄，但是我想為下拉菜單設置樣式，我有一個“漢堡包”樣式的下拉按鈕，而我當前的下拉菜單如下所示： http : //prntscr.com/ctocj2我需要做的是設置下拉菜單的樣式。 我想要完成的是
body { margin: 0; padding: 0; background-color: lightgrey; } .navbar-default { font-family: "Arial Rounded MT"; font-weight: bold; font-size: 20px; position: relative; background-color: white; box-shadow: 20px; padding: 30px; border: none; } .navbar-header { right: auto; } .navbar-nav > li {} .navbar-default .navbar-brand, .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: black; font-size: 30px; } .navbar-default .navbar-nav > li > a { color: #3E6AAF; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #0042a5; opacity: 0.5; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #3E6AAF; background-color: transparent; } .navbar-default .navbar-text { color: #FFF; } .navbar-default .navbar-toggle { background-color: transparant; border: none; } .navbar-toggle .icon-bar { height: 8px; width: 50px; border-radius: 10px; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: ; } .navbar-default .navbar-toggle .icon-bar { background-color: #3E6AAF; border: none; } .col-md-5 { font-family: "Lato-Bold"; padding: 10px; color: white; font-size: 20px; } .col-md-12 { font-family: "Lato-Bold"; height: 520px; padding: 10px; color: white; } .navbar-collapse { border: 0px; } .navbar-default .navbar-collapse { color: #e7e7e7; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color: transparent; box-shadow: none; } .dropdown-menu { background-color: transparent; ; text-decoration-color: black; } .dropdown-toggle { background-color: transparent; color: black; } .navbar-default .navbar-nav .open .dropdown-menu>li>a, .navbar-default .navbar-nav .open .dropdown-menu { background-color: black; color: white; } .navbar-right { padding-right: 100px; } .navbar-brand { position: relative; right: 15%; display: block; padding-top: -100px; width: 50%; }
<!DOCTYPE html> <html lang="en"> <head> <title>Niet beschikbaar</title> <link rel="shortcut icon" href="img/favicon2.ico" type="image/x-icon"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <link rel="stylesheet" href="css/style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script> </head> <body> <!-- NAVIGATIE BALK --> <nav class="navbar navbar-default" role="navigation"> <!-- logo --> <div class="navbar-header"> <!-- --> <a class="pull-right navbar-brand" href="#"> <img src="img/LOGOBIRSKEN2.svg"/> </a> <button type="button" class="pull-left navbar-toggle" data-toggle="collapse" data-target="#mainnavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="mainnavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="#">home</a></li> <li><a href="">over</a></li> <li><a href="#">diensten</a></li> <li><a href="#">contact</a></li> </ul> </div> </nav> <div class="container-fluid"> </div>
我希望你們能幫助我。
雷尼爾
注意：
它僅適用於手機
1 個解決方案
解決方案1
0 已采納 2016-10-14 09:09:01
雷尼爾
用您的style.css破壞此CSS
@media (max-width:767px) {
.navbar-nav{ margin:0}
.navbar-nav>li>a{padding-top: 20px;padding-bottom: 20px; border-top:8px solid #406bad}
.navbar-nav>li:last-child>a{border-bottom:8px solid #406bad}
}
設置引導下拉菜單的樣式
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.