Bootstrap：文本导航栏文本错误的颜色

我想包括一个导航栏的标题一些图像加上一些文本。我正在关注Documentation，但段落中的结果文本“自定义文本”不以与导航栏中其他元素相同的格式（颜色，大小）显示。Bootstrap：文本导航栏文本错误的颜色

<!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文档代码提供的Bootstrap CSS。 – MABC

第一件事节省您的时间，您使用的引导3导航栏光类是引导4类，基本上什么都不做在引导程序3中，您正在引导程序3中查找导航栏defalut。然后，如果我理解您想要的文字，如果您希望文字基本上是导航栏品牌，只需将该文字放在导航栏品牌中并自定义颜色即可在你的CSS。如果你不想要它的自定义颜色，那么不要担心将颜色添加到导航栏品牌。你只需要将你的图片改为display:inline-block，你就可以消除你在导航栏中进行的所有额外工作。

<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> 
    ...

添加CSS，手动将先 #target { color: #337ab7; } Demo

来源

2016-11-20 00:59:52 pbgnz

但我想自定义文本显示为与图像栏的标题，作为navbar品牌，有例子，我也希望它与其他元素显示相同的字体颜色。像这样[http://codepen.io/anon/pen/ObWoPO]，但我想自定义文本不是一个链接。 – MABC

我现在明白了。你能访问我的演示链接吗？因为我无法访问你的:( – pbgnz

– pbgnz

Bootstrap：文本导航栏文本错误的颜色

回答

相关问题