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.