造型導航欄上的引導移動菜單

我想刪除輪廓和背景顏色形式的移動菜單[漢堡菜單]。我只想要沒有輪廓和背景顏色的水平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

造型導航欄上的引導移動菜單

回答

相關問題