ブートストラップの背景色に問題があります

Question

私はフロントエンド用にbootsrapを使用して構築している簡単なページを用意しています。ここに私のFIDDLEです。私は背景色をカスタマイズすることにいくつかの問題があります。

以下は私の現在のページの外観です。あなたがそこに見ることができるように、 はヘッダー、ボディーとフッターです。私が達成したい何

は基本的に私は、体内の2つの異なる色をしたい、この

のようなものです。私は体が お気に入りの上に異なる色を持っているようにしたい。彼らは異なるコンポーネントとして扱われるので、私のフッタやヘッダーコードに変更を加えたくない。だから私が考えているアプローチは、別のdivにお気に入りのタイトルの上にすべてのdivを置いてこれを達成することができますが、私は問題を抱えています。この試みを私のFIDDLEで見てみましょう。色がお気に入りエリアを超えています。

私はどんな提案もありがとう。続き

は私のHTMLコード

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container-fluid" style="border-bottom: 2px solid #CDCCC9; background-color: blue"> 
    <div class="row"> 
     <div class="col-sm-2"></div> 

     <div class="col-sm-2"> 
      &emsp; 
      <!-- navbar header --> 
      <div class="navbar-header">     
       <!-- brand --> 
       <img src="assets/images/fe-logo.png" alt="." style="padding-top:10px;padding-left:30px;padding-bottom:30px;"/> 
       <!--/brand --> 
      </div> 
      <!--/navbar header --> 
     </div> 
     <div class="col-sm-8"> 
      <!-- navbar right --> 
      <!-- ToDo - note that there is a hard-coded name in navbar for now - will need to be dynamically set --> 
      <ul class="nav navbar-nav navbar-right">  
       <li class="navbar-brand"> 

       </li> 
      </ul> 
      <!--/navbar right --> 
     </div> 
    </div> 
    </div> 
</nav> 

<!-- HEADER ENDS HERE --> 



<div id="main" class="container-fluid searchPage-wrapper"> 
    <div class="row"> 
     <div class="col-lg-4"> 
     </div> 
     <div class="col-lg-8"> 
      <div id="searchPage-small-title">NBA</div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-lg-4"> 
     </div> 
     <div class="col-lg-8"> 
      <div id="searchPage-title">Player Portal</div> 
     </div>  
    <div class="row"> 
     <div class="col-lg-12"> 
      <div class="searchPage-box text-left">   
       <form role="form" class="form-inline" ng-submit="submit()">    
        <div class="form-group">    
        <div class="row"> 
         <div class="col-lg-11"> 
          <input type="text" class="searchPage-input" autocomplete="off" ng-model="selected" placeholder="Search Player" 
           typeahead="sponsor as label(sponsor) for sponsor in sponsorList 
           | filter:$viewValue | limitTo:12" typeahead-editable="true" typeahead-min-length="2" 
           required="" name="sponsorName"> 
         </div>   
         <div class="col-md-1">  
         <!-- using Bootstrap default for button --> 


         </div>     
        </div> 
       </div> 
       </form> 
      </div>  
     </div> 
    </div> 

    <div class="row"> 
     <div class="col-lg-4"> 
     </div> 
     <div class="col-lg-8"> 
      <div id="searchPage-favorites-title" class="row">FAVORITES</div> 
     </div> 
    </div> 


    <div class="row"> 
     <div class="col-sm-4"> 
     </div> 

     <!-- this favorites are hard-coded for now for purposes of demo --> 
     <div class="col-sm-2 searchPage-favorites-item" > 
      <i class="fa fa-star"></i> 
      Lebron 
     </div> 
     <div class="col-sm-2 searchPage-favorites-item" > 
      <i class="fa fa-star"></i> 
      Curry 
     </div> 
     <div class="col-sm-2 searchPage-favorites-item" > 
      <i class="fa fa-star"></i> 
      Jordan 
     </div> 

    </div> 
    <div class="row"> 
     <div class="col-sm-12"> 
      &nbsp; 
     </div>  
    </div> 
     </div>  
    </div> 
    <div class="row"> 
     <div class="col-sm-12"> 
      &nbsp; 
     </div>  
    </div>  
    <div class="row"> 
     <div class="col-sm-12"> 
      &nbsp; 
     </div>  
    </div> 
    <div class="row"> 
     <div class="col-sm-12"> 
      &nbsp; 
     </div>  
    </div> 
<div class="main-footer wrapper b-t"> 
    <div class="row"> 
     <div class="col-sm-2"> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-sm-12"> 
     &nbsp; 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-sm-3"> 
     </div>  
     <div class="col-sm-9 subtext">  
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
     BLAH BLAH BLAH BLAH BLAHBLAH BLAH BLAH BLAH BLAHBLAH BLAH BLAH BLAH BLAH&#174;BLAH BLAH BLAH BLAH BLAH 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-sm-3"> 
     </div>   
     <div class="col-sm-9 subtext">  
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
     BLAH BLAH BLAH BLAH BLAHBLAH BLAH BLAH BLAH BLAHBLAH BLAH BLAH BLAH BLAH 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-sm-3"> 
     </div>   
     <div class="col-sm-9 subtext"> 
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
     BLAH BLAH BLAH BLAH BLAHBLAH BLAH BLAH BLAH BLAH 
     </div> 
    </div>  
    <div class="row"> 
     <div class="col-sm-3"> 
     </div>    
     <div class="col-sm-9 subtext"> 
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
     BLAH BLAH BLAH BLAH BLAHBLAH BLAH BLAH BLAH BLAHBLAH BLAH BLAH BLAH BLAH 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-sm-3"> 
     </div>    
     <div class="col-sm-9 subtext"> 
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
     BLAH BLAH BLAH BLAH BLAH 
     </div> 
    </div>  

</div> 

Answer 1

で申し訳ありませんが、私の接続はjsfiddleを開くのに時間がかかることですが、私はアイデアを得ました。 基本的には、divを区切り、そのdivに適切な色を付けるだけです。

//navbar 
<div class="container-fluid"> 
    <div class="row bg-success">//bg-success is green color 
     //player portal 
     //search form 
    </div> 

    <div class="row"> 
     //favorites 
    </div> 
</div> 
//footer 

あなたがしようとしているのは、両方のセクションに色を付けることです。そのため、両方のセクションで同じ背景色が得られます。ここでは例

UPDATE は：Here

Answer 2

あなたがその背景を追加したいエリアに1つの容器ではなく、唯一のいくつかのコンテナを介してアドレス指定することができます。したがって、まず、目的の背景を持つクラスのCSSルールを作成します。

.x1 { background: #fa0; } 

次に、HTMLで影響を受けるすべてのコンテナにそのクラスを追加します。ただ、私はそれを追加しました。このフィドルで見てきた：

https://jsfiddle.net/02j94gmo/1/

Answer 3

は、この単純なものを試してみて、それはあなたを助けることができる願っています。

HTML

<html> 
    <head> 
    <!--<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet" type="text/css" />--> 
    </head> 
    <body> 
    <div class="container"> 
     <div class="row"> 
     <div id="player"> 
      Top here 
     </div> 
     </div> 
     <div class="row"> 
     <div id="favorites"> 
      favorites 
     </div> 
     </div> 
     <div class="row"> 
     <div id="footer"> 
      footer 
     </div> 
     </div> 
    </div> 
    </body> 
</html> 

CSS

body {background-color: blue;} 
#player { 
    background-color: white; 
    padding: 25px; 
} 
#favorites { 
    background-color: #00897b; 
    padding: 25px; 
} 
#footer { 
    background-color: #a5a5a5; 
    padding: 25px; 
}