Почему цвет фона на моей панели обрушения не меняется?

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

Вы можете попробовать:

• добавить boostrap библиотеки
• изменения немного вашего 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 (если у меня есть не плохие глаза это оранжевый) Так у вас есть две возможности:

1) Изменение порядка вашего CSS вызова:

<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> 

Вы должны назвать начальной загрузки первой -> заставьте html читать вашу страницу в обычном порядке.

2) Если он не работает второй вариант:

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

Если вы можете избежать использования importan это лучше, но иногда это необходимо. Попытайтесь сделать правильный клик, осмотрите элемент, когда у вас есть проблема css, и проверьте список, если ваш собственный css в порядке или если он находится в суперзапуске при загрузке.

Я надеюсь, что это сработает для вас. (извините за мой стиль написания так frenchy ^^)