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>

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>

你必须先调用bootstrap - ＆gt;导致html按正常顺序读取您的页面。

2）如果它不起作用第二个选项：

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

如果你可以避免使用！importan它会更好，但有时候它是必要的。尝试做正确的clic，在遇到css问题时检查元素并检查列表中是否有自己的css正常或者是否被bootstrap覆盖。

我希望它对你有用。（对不起我的写作风格如此俗气^^）

为什么我的bootstrap折叠面板上的背景颜色没有变化？

2 个答案: