ブートストラップの折りたたみパネルの背景色が変わらないのはなぜですか？

Question

私はあまりスタイルを設定していないことを知っていますが、私はそれを行う方法を学習しており、質問の背景色を変更したいだけです。私は私のページでそれほど多くの部屋を取らないように私がどのようにそれを得ることができるかについてもわかりません。

/*FAQ Page*/ 
 

 
.panel-title { 
 
\t font-family: freight-text-pro; 
 

 
} 
 

 
.panel-body { 
 
\t font-family: freight-text-pro; 
 

 
} 
 

 
.panel-heading { 
 
\t background-color: #FF3300; 
 
}

<div class="panel-group" id="accordion"> 
 
    <div class="panel panel-default"> <!-- Panel One --> 
 
    <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 
 
\t \t <span class="glyphicon glyphicon-plus"></span> 
 
\t \t \t \t \t Where are you located? 
 
\t \t </a> 
 
\t </h4> 
 
    </div> 
 
    <div id="collapseOne" class="panel-collapse collapse in"> 
 
     <div class="panel-body"> 
 
     We are located in Boston, Massachusetts. 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"> <!-- Panel Two --> 
 
    <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 
 
      <span class="glyphicon glyphicon-plus"></span> 
 
\t \t \t \t \t \t Do you work with overseas/international clients? 
 
     </a> 
 
     </h4> 
 
    </div> 
 
    <div id="collapseTwo" class="panel-collapse collapse"> 
 
     <div class="panel-body"> 
 
     Yes we are open to any client in all countries. 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"><!-- Panel Three --> 
 
    <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> 
 
      <span class="glyphicon glyphicon-plus"></span> 
 
\t \t \t \t \t What is your average project turnaround? 
 
     </a> 
 
     </h4> 
 
    </div> 
 
    <div id="collapseThree" class="panel-collapse collapse"> 
 
     <div class="panel-body"> 
 
\t \t \t \t Though we do not like to give a specific turnaround, we do like to estimate (depending on the job) about 12-16 weeks. 
 
\t \t \t </div> 
 
    </div> 
 
    </div>

Answer 1

あなたがしようとする可能性：あなたのCSSビットブートストラップライブラリに

変更を加える

スニペット：

を

/*FAQ Page*/ 
 

 
.panel-group .panel-default .panel-heading .panel-title { 
 
    font-family: freight-text-pro; 
 

 
} 
 

 
.panel-group .panel-default .panel-collapse .panel-body { 
 
    font-family: freight-text-pro; 
 

 
} 
 

 
.panel-group .panel-default .panel-heading { 
 
    background-color: #FF3300; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<div class="panel-group" id="accordion"> 
 
    <div class="panel panel-default"> <!-- Panel One --> 
 
     <div class="panel-heading"> 
 
      <h4 class="panel-title"> 
 
       <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 
 
        <span class="glyphicon glyphicon-plus"></span> 
 
        Where are you located? 
 
       </a> 
 
      </h4> 
 
     </div> 
 
     <div id="collapseOne" class="panel-collapse collapse in"> 
 
      <div class="panel-body"> 
 
       We are located in Boston, Massachusetts. 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="panel panel-default"> <!-- Panel Two --> 
 
     <div class="panel-heading"> 
 
      <h4 class="panel-title"> 
 
       <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 
 
        <span class="glyphicon glyphicon-plus"></span> 
 
        Do you work with overseas/international clients? 
 
       </a> 
 
      </h4> 
 
     </div> 
 
     <div id="collapseTwo" class="panel-collapse collapse"> 
 
      <div class="panel-body"> 
 
       Yes we are open to any client in all countries. 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="panel panel-default"><!-- Panel Three --> 
 
     <div class="panel-heading"> 
 
      <h4 class="panel-title"> 
 
       <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> 
 
        <span class="glyphicon glyphicon-plus"></span> 
 
        What is your average project turnaround? 
 
       </a> 
 
      </h4> 
 
     </div> 
 
     <div id="collapseThree" class="panel-collapse collapse"> 
 
      <div class="panel-body"> 
 
       Though we do not like to give a specific turnaround, we do like to estimate (depending on the job) about 
 
       12-16 weeks. 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

私はあなたのコードの「スニペットを実行する」を作る持っているとき、私は＃FF3300で背景色を持っている（私は悪くない目を持っている場合、それはオレンジ色です）ですから、二つの可能性があります

を

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<link rel="stylesheet" type="text/css" href="css/YourStyle.css"> 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 

あなたが最初のブートストラップを呼び出す必要があり：

1）あなたのCSSの呼び出しの順序を変更 - > htmlはあなたのページを通常の順序で読み込みます。

2）それが2番目のオプションを動作しない場合は：！あなたが使用することを避けることができる場合

.panel-heading { 
    background-color: #FF3300 !important; 
} 

それが良いでしょうimportanが、いつかそれが必要です。右クリニックをやろうとすると、CSSの問題が発生したときに要素を調べて、自分のCSSが正常かどうか、ブートストラップによって分けられているかどうかをチェックしてください。

私はそれがあなたのために働くことを望みます。 （私の書き込みスタイルsofrenchyのために申し訳ありません^^）