web-dev-qa-db-ja.com

Bootstrapドロップダウンメニューのテキストの色

だから私はTwitterのBootstrapを初めて使用し、ドロップダウンメニュー内のテキストの色を折りたたんだ後、それを変更しようとしています（理にかなっている場合）。

私は this site （<<< ---現在使用しているCSSへのリンク）を使用していくつかのCSSを支援しましたが、正しいテキストの色を変更する適切なコードブロックを見つけることができないようです。

折りたたみメニューを表示してドロップダウンリストに移動するようにWebページを圧縮すると、青色の背景がドロップダウンメニュー項目に移動しますが、フォントの色が黒になり、非常に読みにくくなっています。このフォントを白にしたい。

<nav class="navbar navbar-custom" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse"
                data-target="#bs-example-navbar-collapse-1">
            <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="#">ATR Notary</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li class="dropdown">
                <a href="~/Order/Index" class="dropdown-toggle"
                   data-toggle="dropdown">Orders <b class="caret"></b></a>
                <ul class="dropdown-menu">                                    
                    <li><a href="~/Order/Index">View Orders</a></li>
                    <li><a href="~/Order/Create">Add Order</a></li>
                </ul>
            </li>
        </ul>
        <ul class="nav navbar-nav">
            <li class="dropdown">
                <a href="~/Notary/Index" class="dropdown-toggle"
                   data-toggle="dropdown">Notaries <b class="caret"></b></a>
                <ul class="dropdown-menu">                                   
                    <li><a href="~/Notary/Index">View Notaries</a></li>
                    <li><a href="~/Notary/Create">Add Notary</a></li>
                </ul>
            </li>
        </ul>

        @Html.Partial("_LoginPartial")
    </div><!-- /.navbar-collapse -->

</nav>
csstwitter-bootstrapdrop-down-menutwitter-bootstrap-3
8
MaylorTaylor

このCSSを使用できるはずです。

  /*-- change navbar dropdown color --*/
  .navbar-default .navbar-nav .open .dropdown-menu>li>a,.navbar-default .navbar-nav .open .dropdown-menu {
    background-color: #3344ff;
    color:#ffffff;
  }

デモ： http://www.bootply.com/11375

15
Zim

単純なCSSを適用すれば完了です

この例を見てください：

.navbar{height:70px; padding-top:20px; }

navbarの高さとパディングを変更します-それは外部コンテナです

.dropdown-menu{background:rgba(0,0,0,0.5); color:white; }

ドロップダウンメニューの背景色を変更します-ドロップダウンリンクの下のulです。 navbarの構造を理解するために必要なすべてのこと。

   .dropdown-menu li>a{color:white; }
   .dropdown-menu>li{padding:5px; border-bottom:1px solid white;border-left:1px 
              solid white;border-right:1px solid white }
   .dropdown-menu li>a:hover{background:white; }
7
Rajan471