Question

我尝试通过向dropdown元素添加适当的样式来扩展此自定义组件示例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：

.masthead-dropdown{
background-color: transparent !important;
border-color:white !important;}

自定义样式包含在bootstrap.css之后，但它们不起作用。

Answer 1

通过Cover菜单列表，我用它来猜测代码的一部分，因为我不知道包裹<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;
}

链接字体颜色：

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

<强> JSFiddle

覆盖Bootstrap下拉样式

1 个答案: