Bootstrap css navbar-inverse 下拉菜单如何更改复选框标签文本的颜色

Question

我的 bootstrap 上的导航栏反向导航栏中有一个下拉菜单。下拉菜单有一些复选框。在 desktop/tablet 上一切正常：白色背景，黑色文本。在 'phone 上，复选框背景为黑色，但标签文本为深灰色，因此显示效果不太好：

html:

<nav id="header" class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <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="#">Brand</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
              <form role="form" id="formx">
                <div class="radio">
                  <label><input type="radio" name="optradio">Option 1</label>
                </div>
                <div class="radio">
                  <label><input type="radio" name="optradio">Option 2</label>
                </div>
                <div class="radio">
                  <label><input type="radio" name="optradio">Option 3</label>
                </div>
                <div class="checkbox">
                  <label><input type="checkbox" checked="checked">Option 1</label>
                </div>
                <div class="checkbox">
                  <label><input type="checkbox" >Option 2</label>
                </div>
                <div class="form-group">
                  <label for="species">Species</label>
                  <input id="species" class="form-control" type="text"/>
                </div>
                <div class="form-group">
                  <label for="risk">Risk</label>
                  <select input id="risk" class="form-control"/>
                    <option>Low</option>
                    <option>Medium</option>
                    <option>High</option>
                  </select>
                </div>
              </form>
            </ul>
        </li>
        <li id="map-link"><a href="#">Search</a></li>
        <li id="list-link"><a href="#">Actions</a></li>
        <li id="locate-link"><a href="#">Locate</a></li>
        <li id="more-link"><a href="#">More</a></li>
      </ul>
    </div>
  </div>
</nav>

我在 bootstrap.css 中快速浏览了一下，然后在 css 中尝试了这个：

@media (max-width: 767px) {
  .navbar-inverse .dropdown-menu .radio label:
     color: #fff;
     background-color: transparent;
  }
}

@media (max-width: 767px) {
  .navbar-inverse .dropdown-menu .radio label:color:#fff;
  background-color:transparent;
}
}

<nav id="header" class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <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="#">Brand</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <form role="form" id="formx">
              <div class="radio">
                <label>
                  <input type="radio" name="optradio">Option 1</label>
              </div>
              <div class="radio">
                <label>
                  <input type="radio" name="optradio">Option 2</label>
              </div>
              <div class="radio">
                <label>
                  <input type="radio" name="optradio">Option 3</label>
              </div>
              <div class="checkbox">
                <label>
                  <input type="checkbox" checked="checked">Option 1</label>
              </div>
              <div class="checkbox">
                <label>
                  <input type="checkbox">Option 2</label>
              </div>
              <div class="form-group">
                <label for="species">Species</label>
                <input id="species" class="form-control" type="text" />
              </div>
              <div class="form-group">
                <label for="risk">Risk</label>
                <select input id="risk" class="form-control" />
                <option>Low</option>
                <option>Medium</option>
                <option>High</option>
                </select>
              </div>
            </form>
          </ul>
        </li>
        <li id="map-link"><a href="#">Search</a>
        </li>
        <li id="list-link"><a href="#">Actions</a>
        </li>
        <li id="locate-link"><a href="#">Locate</a>
        </li>
        <li id="more-link"><a href="#">More</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

无济于事。

我认为我走在正确的轨道上 - 谁能帮忙？

谢谢迷你

Answer 1

将您的 css 代码更改为此代码

@media (max-width:767px) {
    .navbar-inverse .dropdown-menu .radio label
    {
        color: #fff;
        background-color: transparent;
    }
}

Bootstrap css navbar-inverse 下拉菜单如何更改复选框标签文本的颜色

Bootstrap css navbar-inverse dropdown how to change color of checkbox label text

html

css

checkbox

twitter-bootstrap