我想包括一些图像和一些文本作为导航栏的标题。我正在按照Documentation进行操作，但是段落中生成的文本“自定义文本”没有以与导航栏其他元素相同的格式（颜色，大小）显示。
<!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>
最佳答案
首先，您正在使用引导程序3，而navbar-light类是引导程序4类，并且在引导程序3中基本上什么都不做，您正在寻找引导程序3中的navbar-defalut。文本基本上是navbar品牌的，只需将文本放在navbar品牌中，然后在您的CSS中自定义颜色即可。如果您不想使用自定义颜色，则不必担心将颜色添加到navbar品牌。您只需要将图像更改为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
关于javascript - bootstrap :文本导航栏文本颜色错误，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40699515/