Bootstrap移動導航欄下拉菜單是透明的

Question

我有一個Django驅動的Bootstrap網站。我使用Start Bootstrap的主題Modern Business。

這是它的外觀上the live sample：

這是它的外觀上my website（注意下面的標誌資源文本）：

這裏是我的導航欄的代碼。

{% load static from staticfiles %} 
<nav class="navbar fixed-top navbar-toggleable-md navbar-inverse bg-inverse"> 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" 
      data-target="#navbarExample" aria-controls="navbarExample" aria-expanded="false" 
      aria-label="Toggle navigation"> 
     <span class="navbar-toggler-icon"></span> 
    </button> 
    <div class="container" style="height: 48px;"> 
     <a class="navbar-brand" href="index.html"> 
      <img src="{% static 'web/img/header-logo-2.png' %}" height="70px" style="height: 50px; 
position: absolute; 
top: 0;"></a> 
     <div class="collapse navbar-collapse" id="navbarExample"> 
      <ul class="navbar-nav ml-auto"> 
       <!--<li class="nav-item dropdown"> 
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownPortfolio" data-toggle="dropdown" 
         aria-haspopup="true" aria-expanded="false"> 
         About 
        </a> 
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownPortfolio"> 
         <a class="dropdown-item" href="">Board of Directors</a> 
         <a class="dropdown-item" href="about-staff">Executive Administration</a> 
        </div> 
       </li>--> 
       <!--<li class="nav-item"> 
        <a class="nav-link" href="schools">Schools</a> 
       </li>--> 
       <!--<li class="nav-item"> 
        <a class="nav-link" href="contact.html">Contact</a> 
       </li>--> 
       <li class="nav-item dropdown"> 
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownPortfolio" data-toggle="dropdown" 
         aria-haspopup="true" aria-expanded="false"> 
         Resources 
        </a> 
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownPortfolio"> 
         <a class="dropdown-item" 
          href="https://www.dropbox.com/s/ngzaxhg4gqlibpx/2016-2017%20OCDL%20Charter.pdf?dl=0" 
          target="_blank">League Charter</a> 
         <a class="dropdown-item" 
          href="https://www.dropbox.com/s/0nh1a93og93vqt0/OCDL%20Affidavit%202015-2016.pdf?dl=0" 
          target="_blank">Student Agreement</a> 
         <a class="dropdown-item" 
          href="https://www.dropbox.com/s/en1t2ek23rxzxlj/OCDL%20Judges%20Affidavit.pdf?dl=0" 
          target="_blank">Judge Agreement</a> 
         <a class="dropdown-item" 
          href="https://www.dropbox.com/s/lwxsnbpmc29vylq/OCDL%20Judge%20Guide-11-4-15.pdf?dl=0" 
          target="_blank">Judge Guide</a> 
         <a class="dropdown-item" 
          href="https://www.dropbox.com/s/tkcvaggipfn91fi/Flow%20Chart%2C%20Orange%20County%20Debate%20League.docx?dl=0" 
          target="_blank">Blank Flowchart</a> 
         <a class="dropdown-item" 
          href="https://www.dropbox.com/s/vphswry1d4rgm0d/Speaker%20Performance%20Rubric%2C%20Orange%20County%20Debate%20League.pdf?dl=0" 
          target="_blank">OCDL Rubric</a> 
        </div> 
       </li> 
       <!--<li class="nav-item dropdown"> 
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" 
         aria-haspopup="true" aria-expanded="false"> 
         Blog 
        </a> 
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog"> 
         <a class="dropdown-item" href="blog-home-1.html">Blog Home 1</a> 
         <a class="dropdown-item" href="blog-home-2.html">Blog Home 2</a> 
         <a class="dropdown-item" href="blog-post.html">Blog Post</a> 
        </div> 
       </li>--> 
       <!--<li class="nav-item dropdown"> 
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" 
         aria-haspopup="true" aria-expanded="false"> 
         Other Pages 
        </a> 
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog"> 
         <a class="dropdown-item" href="full-width.html">Full Width Page</a> 
         <a class="dropdown-item" href="sidebar.html">Sidebar Page</a> 
         <a class="dropdown-item" href="faq.html">FAQ</a> 
         <a class="dropdown-item" href="404.html">404</a> 
         <a class="dropdown-item" href="pricing.html">Pricing Table</a> 
        </div> 
       </li>--> 
      </ul> 
     </div> 
    </div> 
</nav> 

Answer 1

您可以簡單地爲特定的屏幕寬度添加媒體查詢。在你的情況下，自舉導航欄將改變在768px的屏幕寬度，所以只需將其添加到你的css文件：

@media screen and (max-width: 787px) { 
    .navbar-inverse { 
     opacity: 0.9; 
    } 
}