我想将一些图像和一些文本作为导航栏的标题。我正在关注 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>
最佳答案
首先，您使用的是 bootstrap 3，而 navbar-light 类是 bootstrap 4 类，在 bootstrap 3 中基本上什么都不做，您正在寻找 bootstrap 3 中的 navbar-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
关于javascript - Bootstrap : Text navbar-text wrong color，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40699515/