부트 스트랩 Navbar의 사용자 정의 - 새로운 라인을 제외하고 투명/바

Question

내가 투명하게 부트 스트랩 네비게이션 바 사용자 정의 내 CSS에 중요한 태그를 사용하여이 강제 할 수 있었다입니다 ...

.navbar-default { 
 
    background-color: transparent !important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<nav class="navbar transparent navbar-default navbar-static-top"> 
 
    <div class="container"> 
 

 
    <div class="navbar-header"> 
 
     <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> 
 
       <span class="sr-only">Toggle navigation</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 
     <a href="contact.html" class="navbar-brand">Meredith Bristol</a> 
 
    </div> 
 

 
    <div id="navbarCollapse" class="collapse navbar-collapse"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="contact.html">Contact Me</a></li> 
 
     <li><a href="personal.html">About Meredith</a></li> 
 
     <li><a href="resumewebsite.html">Employment History</a></li> 
 
     <li><a href="education.html">Education</a></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>

!

그러나 지금은 navbar 자체 아래에 가로선/막대가 보입니다. click here to see example.이 줄을 어떻게 만듭니 까?

Answer 1

그건 border-bottom 부트 스트랩에 의해 추가, 그래서 당신은 또한 색상을 투명하게 (또는 제거)해야합니다

/* only to show there is no more border/background on the navbar */ 
 
body { 
 
    background-color: lightblue!important; 
 
} 
 
/**/ 
 

 
.navbar-default { 
 
    background-color: transparent !important; 
 
    border-color: transparent !important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<nav class="navbar transparent navbar-default navbar-static-top"> 
 
    <div class="container"> 
 

 
    <div class="navbar-header"> 
 
     <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> 
 
       <span class="sr-only">Toggle navigation</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 
     <a href="contact.html" class="navbar-brand">Meredith Bristol</a> 
 
    </div> 
 

 
    <div id="navbarCollapse" class="collapse navbar-collapse"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="contact.html">Contact Me</a></li> 
 
     <li><a href="personal.html">About Meredith</a></li> 
 
     <li><a href="resumewebsite.html">Employment History</a></li> 
 
     <li><a href="education.html">Education</a></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>

작동