0
私のブートストラップnavbarはCSSでカスタマイズすることはできません。 CSSコードを例として挿入しました。 id #navを落として代わりに.navbar-inverse;を使用すると、これはうまくいきません。使用されているCSSの色は、変更が行われているかどうかを確認するためのものです。ここでBootstrap 3で作成したNavbarをカスタマイズできません
は...任意のヘルプ/提案のため
感謝思われるものの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'のような16進値のためだけに使われます。ピンクはピンクで、前には「＃」はありません。 – Stefan
おっと！愚かなエラー - 私はこの問題を解決しようと疲れています。 ＃を削除すると、まだ何も変更されていません... – Bambi
要素を調べて、何かがあなたの色を上書きしているかどうかを確認し、それを下位レベルの階層に適用したり、あなたのケースで '！important'あなたの場合' background-color：pink！important; ' – Stefan