0
我的引導程序導航欄無法在CSS中自定義。我已經插入了我的CSS代碼作爲例子。當我放棄id #nav並使用.navbar-inverse;代替時，它也不起作用...所使用的CSS顏色僅用於查看是否正在進行更改。無法自定義使用引導程序創建的導航欄3
這裏是什麼出現picture ...
任何幫助/建議，非常感謝！ :)
@media (max-width: @screen-md-max) {
.container{
padding: 0;
overflow-x: hidden;
}
}
/* ----- BACKGROUND ----- */
body {
background-image: url('../img/harley.jpg');
background-repeat: no-repeat;
background-size: cover;
margin: -10px;
background-attachment: fixed;
}
/* ----- BODY ----- */
#header {
height: 150px;
margin-top: 0px;
margin-bottom: 0;
margin: auto;
text-align: center;
background-color: rgba(255, 255, 255, 0.5);
background-attachment: fixed;
}
#header h1 {
font-family: "Trocchi", serif;
color: #3E2F1B;
padding-top: 30px;
}
#header h2 {
font-family: "Trocchi", serif;
color: #644A26;
font-size: 20px;
padding-top: 20px;
}
/* -- RESPONSIVE HEADER (need to add more) */
@media all and (max-width: 2000px) {
#header h1 {
font-size: 5.7em;
}
}
@media all and (max-width: 1500px) {
#header h1 {
font-size: 5.0em;
}
}
@media all and (max-width: 1000px) {
#header h1 {
font-size: 4.3em;
}
}
@media all and (max-width: 750px) {
#header h1 {
font-size: 3.7em;
}
}
@media all and (max-width: 700px) {
#header h1 {
font-size: 3.0em;
}
}
@media all and (max-width: 500px) {
#header h1 {
font-size: 2.3em;
}
}
<<<<<<< HEAD
/* ----- NAVIGATION BAR ----- */
#nav {
background-color: pink;
border-color: blue;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Home/Harley's Haunts</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!-- import font "Trocchi" -->
<style>
@import url('https://fonts.googleapis.com/css?family=Trocchi');
</style>
</head>
<body>
<!-- ***** HEADER ***** -->
<div class="container-fluid" id="header">
<h1>HARLEY'S HAUNTS</h1>
<h2>Where dogs are welcome in Aberdeen!</h2>
</div>
<!-- ***** NAVIGATION BAR ***** -->
<nav class="navbar navbar-inverse" id="nav">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Pet-Friendly Venues<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Shops</a></li>
<li><a href="#">Cafes</a></li>
<li><a href="#">Pubs/Bars</a></li>
<li><a href="#">Restuarants</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</nav>
</body>
</html>
當你使用顏色名稱時，前面沒有'＃'。 '＃'只適用於'＃FFFFFF'等十六進制值。粉紅色是粉紅色的，前面沒有'＃'。 – Stefan
哎呀！愚蠢的錯誤 - 我試圖解決這個問題已經很累了。當我刪除＃時，它仍然不會改變任何東西... – Bambi
檢查元素並檢查是否有東西覆蓋了您的顏色，然後您可以嘗試將其應用於較低級別的層次結構，或者如果您真的想要強制它使用'！important'，在你的案例中'background-color：pink！important;' – Stefan