重寫引導下拉式的

Question

我試圖通過添加適當的樣式到下拉元素來擴展此自定義組件例如http://getbootstrap.com/examples/cover/。

<li class="dropdown masthead-dropdown"> 
           <a class="" data-toggle="dropdown" href="#">Media<span class="caret"></span></a> 
           <ul class="dropdown-menu"> 
            <li><a href="#">Videos</a></li> 
            <li><a href="#">Pictures</a></li> 
           </ul> 
          </li> 

CSS：

​​

自定義樣式包括bootstrap.css後，但他們不工作。

Answer 1

通過封面菜單列表中去，我用它來猜測你的代碼的一部分，因爲我不知道什麼是做包裝的<li>：

<div class="masthead clearfix"> 
    <div class="inner"> 
    <h3 class="masthead-brand">Cover</h3> 
    <nav> 
     <ul class="nav masthead-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">Features</a></li> 
     <li><ul class="dropdown"> 
    <button class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
    Media 
    <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
    <li><a href="#">Videos</a></li> 
    <li><a href="#">Pictures</a></li> 
    </ul> 
</ul></li> 
     </ul> 
    </nav> 
    </div> 
</div> 

然後添加到您的CSS：

.dropdown-toggle { 
    background-color: transparent; 
    border-color: #fff; 
    border-style: solid; 
    border-top: none; 
    border-right: none; 
    border-left: none; 
} 

你還可以用這個改變的下拉背景顏色：

.dropdown-menu{ 
    background-color: #000; 
} 

而且鏈接˚F ONT顏色：

.dropdown-menu>li>a{ 
    color: #fff; 
} 

JSFiddle