造型导航栏上的引导移动菜单

我想删除轮廓和背景颜色形式的移动菜单[汉堡菜单]。我只想要没有轮廓和背景颜色的水平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; 
}

但我不知道为什么它不工作。

在此先感谢您的帮助

来源

2016-07-21 Kishan Patel

Whts错在我的代码??? –

你可以试试下面的简单代码

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

来源

2016-07-21 11:15:02

伟大的工作兄弟。谢谢 –

试试这个代码，这将给只有三个水平线，这对我来说

<!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; 
}

来源

2016-07-21 11:06:34

在我的代码错了？ –

可能是因为你使用.navbar-inverse类 –

如果有一个navbar-inverse类，它工作正常！如果没有narbar逆类可以简单地从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; 
 
    
 
} 
 
    .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>

来源

2016-07-21 11:07:13

感谢兄弟的建议。 –

就在navbar-toggle添加CSS：

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

这里的工作演示：https://jsfiddle.net/q0uxe6t0/

来源

2016-07-21 11:09:47

您需要的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>

来源

2016-07-21 11:09:53

造型导航栏上的引导移动菜单

回答

相关问题