html - 删除 Bootstrap 3 中导航栏按钮的边框

Question

我正在创建一个网页，假设我有这个导航栏:(礼貌 TutorialsPoint)

<nav class="navbar navbar-default" role="navigation"> 
   <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse"  
         data-target="#example-navbar-collapse"> 
         <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="#">TutorialsPoint</a> 
   </div> 
   <div class="collapse navbar-collapse" id="example-navbar-collapse"> 
      <ul class="nav navbar-nav"> 
         <li class="active"><a href="#">iOS</a></li> 
         <li><a href="#">SVN</a></li> 
         <li class="dropdown"> 
            <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
               Java <b class="caret"></b> 
            </a> 
            <ul class="dropdown-menu"> 
               <li><a href="#">jmeter</a></li> 
               <li><a href="#">EJB</a></li> 
               <li><a href="#">Jasper Report</a></li> 
               <li class="divider"></li> 
               <li><a href="#">Separated link</a></li> 
               <li class="divider"></li> 
               <li><a href="#">One more separated link</a></li> 
            </ul> 
         </li> 
      </ul> 
   </div> 
</nav>

这会创建这样的边框: codepen.io/aravind-forever/pen/WGQXzL

我想删除 button 和 nav 的边框。我该怎么做呢？我试过 border: none 但这不起作用。

谢谢!

Answer 1

请确定您遇到困难的原因...

.navbar.navbar-default, .navbar button.navbar-toggle { border: none; }

在此处查看: FIDDLE

.navbar.navbar-default, .navbar button.navbar-toggle { border: none; }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div style="height: 40px;" title="just to move it down a little in snippet"></div>
<nav class="navbar navbar-default" role="navigation"> 
   <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse"  
         data-target="#example-navbar-collapse"> 
         <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="#">TutorialsPoint</a> 
   </div> 
   <div class="collapse navbar-collapse" id="example-navbar-collapse"> 
      <ul class="nav navbar-nav"> 
         <li class="active"><a href="#">iOS</a></li> 
         <li><a href="#">SVN</a></li> 
         <li class="dropdown"> 
            <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
               Java <b class="caret"></b> 
            </a> 
            <ul class="dropdown-menu"> 
               <li><a href="#">jmeter</a></li> 
               <li><a href="#">EJB</a></li> 
               <li><a href="#">Jasper Report</a></li> 
               <li class="divider"></li> 
               <li><a href="#">Separated link</a></li> 
               <li class="divider"></li> 
               <li><a href="#">One more separated link</a></li> 
            </ul> 
         </li> 
      </ul> 
   </div> 
</nav>