web-dev-qa-db-ja.com

ナビゲーションバーのテキストの色を変更Bootstrap

現在、私のnavbarの関連部分を表す次のhtmlがあります。

<nav class="navbar navbar-inverse" role="navigation">
    <div class="container">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><span class="glyphicon glyphicon-user"></span> About</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-earphone"></span> Contact</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-briefcase"></span> Portfolio</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-list-alt"></span> R&eacute;sum&eacute;</a></li>
        </ul>
    </div>
</nav>

そして、私はナビゲーションバーのテキストの色を変更するために使用したいと思っていた次のCSSを持っています：

.nav.navbar-nav.navbar-right {
    color: blue;
}

唯一の問題は、テキストの色が変わらないことです。また、非常に 類似した質問 が未解決になったことも確認しました。これを解決できる人は誰でも解決できると思います。

htmlcsstwitter-bootstrapcolors
15
Quinn McHugh

次のようにします。

.nav.navbar-nav.navbar-right li a {
    color: blue;
}

上記は特定のリンクをターゲットにします。これはあなたが望むものであり、リスト全体を青にすることはあなたが最初にやっていたことです。 JsFiddle です。

もう1つの方法は、別のクラスを作成し、次のように実装することです。

HTML

<li><a href="#" class="color-me"><span class="glyphicon glyphicon-list-alt"></span> R&eacute;sum&eacute;</a></li>

CSS

.color-me{
    color:blue;
}

またこれで示されている JsFiddle

30
BuddhistBeast

bootstrap 4の時点で、答えは単純にnav要素にnavbar-darkを設定することです。これにより、テキストとライトテーマへのリンクが設定されます。

<nav class="navbar navbar-dark">
8
Leon

これを試して

.nav.navbar-nav.navbar-right li a span{
    color: blue;
}

うまくいかない場合は、これを試してください

.nav.navbar-nav.navbar-right li a {
    color: blue;
}
2
Aditya Ponkshe

リンクしたスレッドが質問に答えます。 a要素自体をターゲットにする必要があります。例えば。

.nav.navbar-nav.navbar-right a {
    color: blue;
}

それがうまくいかない場合は、より具体的にする必要があります。例えば。

.nav.navbar-nav.navbar-right li a {
    color: blue;
}
2
ralph.m

このコードは動作します

.navbar .navbar-nav > li .navbar-item ,
.navbar .navbar-brand{
                       color: red;
                      }

あなたのCSSに貼り付けて、以下の要素がある場合は実行してください

  • .navbar-item class として定義します

    例.

    <li>@Html.ActionLink("Login", "Login", "Home", new { area = "" },
 new { @class = "navbar-item" })</li>

    OR

    <li> <button class="navbar-item">hi</button></li>
    • 1
    kushal

    Navbarのテキストの色を変更するには、インラインCSSを使用できます。

    <a style="color: #3c6afc" href="#">
    1
    ABDUL KHALIQ

    実際、CSSフォーマットをハッキングする代わりにの代わりにstandard bootstrap text colorsを使用できます。

    標準色の例：text-primary、text-secondary、text-success、text-danger、text-warning、text-info

    以下のNavbarコードサンプルでは、​​テキストHomepageはオレンジ色（text-warning）。

    <a class="navbar-brand text-warning" href="/" > Homepage </a>

    以下のNavbarメニュー項目のサンプルでは、​​テキストMenu Itemは青色（text-primary）。

    <a class="dropdown-item text-primary" href="/my-link">Menu Item</a>
    0
    Amos
    .nav-link {
color: blue !important;
}

    私のために働いた。 Bootstrap v4.3.1

    0
    wchoward

    あなたのCSSでこれを試してください：

    #ntext{
 color: #000000;
  }

    次に、すべてのナビゲーションバーリストコードで以下を実行します。

    <li><a href="#" id="ntext"><span class="glyphicon glyphicon-user"></span> About</a></li>
    0
    Shakela Tamuti

    ナビゲーションバーの背景色を変更する必要がある場合は、次のことができます。

    <nav class="navbar navbar-expand-lg navbar-light" style="background-color=#e3f2fd">

    テキストを変更するには：

    <a class="nav-link" href="#" style="color:#ccc">
    0
    Martin Minnie