html - 为什么我的 bootstrap 折叠面板的背景颜色没有改变？

Question

我知道我没有设计太多样式，但我正在学习如何做，我只想更改问题的背景颜色。我也不确定如何让它不占用我页面上的太多空间。

/*FAQ Page*/

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

}

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

}

.panel-heading {
	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">
		<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>

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>