ブートストラップのナビゲーションバーの色を変更できません

ブートストラップでランディングページを作成していますので、固定されたnavbarを追加しました。navbarの色を変更したいのです（バックグラウンドカラーを使用してnavbarの色を変更しようとしました。！重要な特性が、それでも無変更）どのように私はここに、この問題ブートストラップのナビゲーションバーの色を変更できません

を解決するのですが、私のコードは

ある

<html> 
<head> 
    <title>MyLandingPage</title> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet"> 
<link rel="stylesheet" href="http://s.mlcdn.co/animate.css"> 
<style> 
*{ 
    margin: 0; 
    padding: 0; 
} 
.navbar.navbar-default{ 
    background-color:blue; 
    height:60px; 
} 
#bodycontainer{ 
    background-image:url(wood.jpg); 
    width:100%; 
    background-size:cover; 
} 
form{ 
    position:relative; 
    top:-50px; 
} 
#myheader h1{ 
    font-size: 60px; 
    color:white; 
    font-weight:bold; 
    text-align:center; 
    margin-top:250px; 
    font-family: 'Pacifico', cursive; 

} 
#txt1{ 
    text-align:center; 
    color:black; 
    font-weight:bold; 
} 
#txt2{ 
    text-align:center; 
    color:black; 
    font-weight:bold; 
} 
#txt3{ 
    text-align:center; 
    color:black; 
    font-weight:bold; 
} 
#txt4{ 
    text-align:center; 
    color:black; 
    font-weight:bold; 
} 
#txt5{ 
    text-align:center; 
    color:black; 
} 
.mybutton{ 
    margin-left:250px; 
} 
.apple{ 
    text-align:center; 
    width:250px; 
} 
#txt6{ 
    text-align:center; 
    color:black; 
} 
#txt7{ 
    text-align:center; 
    color:black; 
} 
#footer{ 
    background-color:#B0D1FB; 
    width:100%; 
} 
</style> 
</head> 
<body> 
    <div class="container"> 
    <div class="navbar navbar-default navbar-fixed-top"> 
     <div class="navbar-brand navbar-header"> 
     [email protected] 
     </div> 
     <div class="collapse navbar-collapse" id="navbar-example"> 

     <ul class="nav nav-pills"> 
      <li class="active"><a href="">Link 1</a></li> 
      <li><a href="#">Link 2</a></li> 
      <li><a href="#">Link 3</a></li> 
      <li><a href="#">Link 4</a></li> 
      <li><a href="#">Link 5</a></li> 
     </ul> 
     <form class="navbar-form navbar-right" id="myform"> 
      <input type="email" placeholder="[email protected]" class="form-control"/> 
      <input type="password" placeholder="*********" class="form-control"/> 
      <button type="button" class="btn btn-info">Log-In</button> 
      </form> 

     </div> 
     <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 

    </div> 

    </div> 
    <div class="container bodycontainer" id="bodycontainer"> 
    <div class="row"> 
     <div class="col-md-6 col-md-offset-3" id="myheader"> 
     <h1 class="animated ZoomIn infinite ">MY APPLICATION</h1> 
     <p class="lead" id="txt1">This Why You Should Download The App</p> 
     <p id="txt2">For more Information about the app please scroll down the more to access the information you can get the idea about it</p> 
     <p id="txt3">If u are intrested please join our maling list</p> 
     <br/> <br/> <br/> 
     <form class=""> 
      <div class="input-group"> 
      <span class="input-group-addon" id="basic-addon1">@</span> 
      <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"> 
      </div> 
     </form> 

     <button type="button" class="btn btn-info btn-lg mybutton">Submit</button> 

     </div> 
    </div> 

    </div> 
    <div class="container bodycontainer"> 
    <div class="row"> 
     <h1 id="txt4">Why this app is Osome...?</h1> 
     <p id="txt5">Summery of my application</p> 
    </div> 
    <div class="row"> 
     <div class="col-md-4"> 

     <h2><span class="glyphicon glyphicon-heart" aria-hidden="true"></span>Header</h2> 
     Lorem ipsum dolor sit amet, ius case moderatius no, eu posse phaedrum laboramus nec. Modo eius altera in vel, constituam reformidans at sea. Cu laoreet expetenda iracundia cum, vel an persius feugiat forensibus, at altera similique deterruisset has. Nam doctus viderer 
     cu, aliquid prodesset constituam no eum. An nam veritus oportere, qui tritani sanctus et.Et aeterno adversarium mea, mei dicant consul eu. Eum ut sapientem intellegam consectetuer, cum ut stet esse numquam, erant intellegam disputando te mea. Ei quaeque liberavisse nam. 
     Ferri nobis suavitate eam at, movet quaestio no has, usu et nibh molestiae posidonium.Usu porro eligendi ea. Ad quo aliquam hendrerit, nam omnis necessitatibus ut. Qui probo propriae delicatissimi et. Id reque aliquam reprehendunt nec, dicunt rationibus at sea, ex vim sint suscipit gloriatur. 
    Ea graece partiendo sea.<br/> 
    <button class="btn btn-info btn-lg">Sign-Up</button> 


     </div> 

     <div class="row"> 
     <div class="col-md-4"> 

     <h2><span class="glyphicon glyphicon-home" aria-hidden="true"></span>Header</h2> 
     Lorem ipsum dolor sit amet, ius case moderatius no, eu posse phaedrum laboramus nec. Modo eius altera in vel, constituam reformidans at sea. Cu laoreet expetenda iracundia cum, vel an persius feugiat forensibus, at altera similique deterruisset has. Nam doctus viderer 
     cu, aliquid prodesset constituam no eum. An nam veritus oportere, qui tritani sanctus et.Et aeterno adversarium mea, mei dicant consul eu. Eum ut sapientem intellegam consectetuer, cum ut stet esse numquam, erant intellegam disputando te mea. Ei quaeque liberavisse nam. 
     Ferri nobis suavitate eam at, movet quaestio no has, usu et nibh molestiae posidonium.Usu porro eligendi ea. Ad quo aliquam hendrerit, nam omnis necessitatibus ut. Qui probo propriae delicatissimi et. Id reque aliquam reprehendunt nec, dicunt rationibus at sea, ex vim sint suscipit gloriatur. 
     Ea graece partiendo sea.<br/> 
     <button class="btn btn-info btn-lg">Sign-Up</button> 


     </div> 

     <div class="row"> 
      <div class="col-md-4"> 

      <h2><span class="glyphicon glyphicon-star" aria-hidden="true"></span>Header</h2> 
      Lorem ipsum dolor sit amet, ius case moderatius no, eu posse phaedrum laboramus nec. Modo eius altera in vel, constituam reformidans at sea. Cu laoreet expetenda iracundia cum, vel an persius feugiat forensibus, at altera similique deterruisset has. Nam doctus viderer 
      cu, aliquid prodesset constituam no eum. An nam veritus oportere, qui tritani sanctus et.Et aeterno adversarium mea, mei dicant consul eu. Eum ut sapientem intellegam consectetuer, cum ut stet esse numquam, erant intellegam disputando te mea. Ei quaeque liberavisse nam. 
      Ferri nobis suavitate eam at, movet quaestio no has, usu et nibh molestiae posidonium.Usu porro eligendi ea. Ad quo aliquam hendrerit, nam omnis necessitatibus ut. Qui probo propriae delicatissimi et. Id reque aliquam reprehendunt nec, dicunt rationibus at sea, ex vim sint suscipit gloriatur. 
     Ea graece partiendo sea.<br/> 
     <button class="btn btn-info btn-lg">Sign-Up</button> 


      </div> 


    </div> 
    </div> 

    <div class=" bodycontainer" id="footer"> 
    <div class=""> 
     <h1 id="txt6">Download the App</h1> 
     <p class="lead" id="txt7">Realy why should i download this?</p> 
     <p><center><img src="applelogo.jpg" class="apple"></center></p> 
    </div> 

    </div> 
    <script> 
$(".bodycontainer").css("min-height",$(window).height()); 
    </script> 


</body> 
</html>

出典

2016-07-10 Mandar Sant

どうやら知っていたが、背景画像は、ありますか？

.navbar-default { 
    background-color:blue; 
    background-image:none; 
    height:60px; 
}

出典

2016-07-10 06:17:36

background-imageを使用する理由：none; –

私が言ったように、オーバーライドしているコードはそのdivに指定された背景画像（グラデーション）を持っています。 –

おかげさまで、あなたのお手伝いをしてくださって、お世話になりました。もっと... –

これを適用するあなたの背景色を妨げている

background-image: linear-gradient(to bottom,#fff 0,#f8f8f8 100%)

ブートストラップのテーマCSSで定義済みの背景画像プロパティがあります。

background-image:none;~.navbar.navbar-defaultを追加します。

出典

2016-07-10 06:40:37 sarath

ブートストラップのナビゲーションバーの色を変更できません

答えて

関連する問題