[英]Bootstrap: Text navbar-text wrong color
我想包括一些圖像和一些文本作為導航欄的標題。 我正在遵循文檔,但是段落中的結果文本“自定義文本”未以與導航欄其他元素相同的格式(顏色,大小)顯示。
<!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>
<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; }
#target { color: #337ab7; }
演示
首先,您正在使用引導程序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;
}
這是一個演示小提琴演示
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.