堆栈内存溢出
  繁体   English   中英

在导航栏上设置Bootstrap移动菜单的样式

[英]Styling the Bootstrap mobile menu on navbar

 原文  2016-07-21 11:02:09  6   5    html/ css/ twitter-bootstrap

问题描述

我正在尝试从移动菜单[Hamburger菜单]中删除轮廓和背景色。我只希望水平3行没有轮廓和背景色。

这是我正在尝试的方法，但是当没有悬停/聚焦时仍会显示轮廓。 

<nav class="navbar navbar-default">
         <div class="container">
                 <div class="navbar-header">
                         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                                 <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="index.html">abc</a>
                 </div>

                 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                         <ul class="nav navbar-nav navbar-right">
                                 <li>
                                         <a href="index.html">Home</a>
                                 </li>
                         </ul>
                 </div>
         </div>
 </nav>

这是我正在申请的CSS 

 .navbar-default{
    background-color: #862f38;
}
.navbar-toggle:link,
.navbar-toggle:visited,
.navbar-toggle:hover,
.navbar-toggle:active,
.navbar-toggle:focus{
  background:none !important;
  border: none !important;
  outline: none !important;
}
@media screen and (max-width: 768px){
.navbar-toggle:link,
.navbar-toggle:visited,
.navbar-toggle:hover,
.navbar-toggle:active,
.navbar-toggle:focus{
  background:none !important;
  border: none !important;
  outline: none !important;
}

但是我不知道为什么它不起作用。

先谢谢您的帮助

5 个解决方案

解决方案1
 3 已采纳  2016-07-21 11:15:02

您可以尝试以下简单代码 

.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{
    background-color: transparent;
}
.navbar-default .navbar-toggle{
    border-color: transparent;
}

解决方案2
 1  2016-07-21 11:06:34

试试这个代码，这只会给出三个水平线，对我来说很好 

 <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Case</title> <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.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <style> .navbar{ background:#ddd; } .navbar-inverse .navbar-toggle { border-color: transparent !important; } .navbar-toggle { background-color: transparent; background-image: none; border: 1px solid transparent; border-radius: 4px; float: right; margin-bottom: 8px; margin-right: 15px; margin-top: 8px; padding: 9px 10px; position: relative; } </style> </head> <body> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">WebSiteName</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Page 1-1</a></li> <li><a href="#">Page 1-2</a></li> <li><a href="#">Page 1-3</a></li> </ul> </li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <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> </ul> </div> </div> </nav> <div class="container"> <h3>Collapsible Navbar</h3> <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window). <p>Only when the button is clicked, the navigation bar will be displayed.</p> </div> </body> </html> 

.navbar-inverse .navbar-toggle {
    border-color: transparent !important;
}

.navbar-toggle {
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    float: right;
    margin-bottom: 8px;
    margin-right: 15px;
    margin-top: 8px;
    padding: 9px 10px;
    position: relative;
}

解决方案3
 1  2016-07-21 11:09:53

您需要将CSS添加到.navbar-toggle 

 .navbar-default{ background-color: #862f38; } .navbar-toggle:link, .navbar-toggle:visited, .navbar-toggle:hover, .navbar-toggle:active, .navbar-toggle:focus{ background:none !important; border: none !important; outline: none !important; } @media screen and (max-width: 768px){ .navbar-toggle:link, .navbar-toggle:visited, .navbar-toggle:hover, .navbar-toggle:active, .navbar-toggle:focus{ background:none !important; border: none !important; outline: none !important; } .navbar-toggle{ border:none !important; } 
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <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.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <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="index.html">abc</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li> <a href="index.html">Home</a> </li> </ul> </div> </div> </nav>

解决方案4
 0  2016-07-21 11:07:13

你要这个？ 

  .navbar-default{ background-color: #862f38; } .navbar-toggle:link, .navbar-toggle:visited, .navbar-toggle:hover, .navbar-toggle:active, .navbar-toggle:focus{ background:none !important; border: none !important; outline: none !important; } @media screen and (max-width: 768px){ .navbar-toggle:link, .navbar-toggle:visited, .navbar-toggle:hover, .navbar-toggle:active, .navbar-toggle:focus{ background:none !important; border: none !important; outline: none !important; } .navbar-default .navbar-toggle { border-color: transparent !important; } } 
 <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Case</title> <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.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <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="index.html">abc</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li> <a href="index.html">Home</a> </li> </ul> </div> </div> </nav> </body> </html>

解决方案5
 0  2016-07-21 11:09:47

只需在navbar-toggle添加CSS： 

.navbar-toggle{
  border:none;
  background:none;
}

这是工作示例： https : //jsfiddle.net/q0uxe6t0/

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 导航栏引导移动菜单 bootstrap-隐藏移动菜单（导航栏） 引导导航栏菜单未显示在移动设备上 Bootstrap NavBar汉堡菜单在移动设备上不起作用 自定义样式后，Bootstrap Navbar在移动视图中无法正常工作 防止bootstrap导航栏下拉列表隐藏在“移动导航栏菜单中” Navbar样式化HTML和Bootstrap 引导程序的样式导航栏 Bootstrap 4 - 设计折叠的导航栏 Bootstrap导航栏样式问题
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM