ブートストラップ：テキストnavbar-textの色が間違っています

ナビゲーションバーのタイトルに画像とテキストを追加したいと思います。私はDocumentationに従っていますが、パラグラフの結果テキスト 'カスタムテキスト'は、ナビゲーションバーの他の要素と同じ形式（色、サイズ）で表示されません。ブートストラップ：テキストnavbar-textの色が間違っています

<!doctype html> 
<html> 

<head> 
    <meta charset="UTF-8"> 
    <meta content="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Untitled Document</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
</head> 
<body> 
    <nav class="navbar navbar-light" style="background-color: #e3f2fd;"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
      <div class="navbar-brand"> 
      <a href="#"> 
       <img alt="logotitle" src="logo.png"> 
      </a> 
       <p class="navbar-text">Custom text</p> 
      </div> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navmenu"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 
     <div class="collapse navbar-collapse" id="navmenu"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="#">activeitem</a></li> 
       <li><a href="#">navitem1</a></li> 
       <li><a href="#">navitem2</a></li> 
       <li><a href="#">navitem3</a></li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign in</a></li> 
       <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Log in</a></li> 
      </ul> 
     </div> 
    </div> 
</nav> 
</body> 

</html>

出典

2016-11-20 MABC

であるあなたも、あなたのCSSをしてください提供することはできますか？ ctrl + Mを使用すると、コードスニペットをここにも置くことができます。 –

使用されるCSSは、HTMLドキュメントコードと共に提供されるブートストラップCSSだけです。 – MABC

手動で、それはあなたの時間を節約する、まず物事最初のブートストラップ3を使用していて、ナビゲーションバーライトクラスは、ブートストラップ4クラスであり、基本的に何もしませんが、CSSを追加ブートストラップ3では、ブートストラップ3でnavbar-defalutを探しています。次に、テキストを基本的にnavbarブランドにしたいと思っている場合は、そのテキストをnavbarブランドとカスタムカラーに入れますそこにあなたのCSS。それをカスタムカラーにしたくない場合は、その色をnavbarブランドに追加することについて心配しないでください。あなたは画像をdisplay:inline-blockに変更する必要があり、あなたはあなたのnavbarで行っている余分なものをすべて排除することができます。ここで

<nav class="navbar navbar-default" style="background-color: #e3f2fd;"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <a href="#" class="navbar-brand"><img src="https://placehold.it/20x20"/> Your Text</a> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navmenu"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
    </div> 
    <div class="collapse navbar-collapse" id="navmenu"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">activeitem</a></li> 
     <li><a href="#">navitem1</a></li> 
     <li><a href="#">navitem2</a></li> 
     <li><a href="#">navitem3</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign in</a></li> 
     <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Log in</a></li> 
     </ul> 
    </div> 
    </div> 
</nav>

とCSS

.navbar-brand img{ 
    display:inline-block; 
    width:20px; 
    height:20px; 
} 
.navbar-default .navbar-brand{ 
    color:green; 
}

はデモFiddle Demo

出典

2016-11-20 01:54:17

<div class="container-fluid"> 
    <div class="navbar-header"> 

    <div class="navbar-brand"> 
     <a href="#"> 
     <img alt="logotitle" src="logo.png"> 
     </a> 
      <span id="target"> Custom Text </span> 
    </div> 

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navmenu"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    ...

#target { color: #337ab7; } Demo

出典

2016-11-20 00:59:52 pbgnz

しかし、私は、カスタムバーコードのタイトルとして表示するカスタムテキストをnavbarブランドとして、例がありますし、私は他の要素と同じフォントの色で表示したいです。これは[http://codepen.io/anon/pen/ObWoPO]のようなものですが、私はカスタムテキストをリンクにしたくありません。 – MABC

私は今それを得る。私のデモリンクにアクセスできますか？私はあなたにアクセスできないので:( – pbgnz

– pbgnz

ブートストラップ：テキストnavbar-textの色が間違っています

答えて

関連する問題