为什么我的bootstrap网页模板无法更改颜色或字体大小？

Question

我想改变字体的颜色，里面有什么是 <h2> 标签，试图将颜色改为黑色(#000000)，但什么也没发生。

      .main-slider .content .rating {
  position: relative;
  opacity: 0;
  text-align: center;
  margin-bottom: 20px;
  -webkit-transition: all 1000ms ease;
  -moz-transition: all 100ms ease;
  -ms-transition: all 1000ms ease;
  -o-transition: all 1000ms ease;
  transition: all 1000ms ease;
  -webkit-transform: translateX(50px);
  -moz-transform: translateX(50px);
  -ms-transform: translateX(50px);
  -o-transform: translateX(50px);
  transform: translateX(50px);
  .main-slider .rating .fa {
    position: relative;
    color: #000000;
    font-size: 200px;
    margin: 0px 4px;
    .main-slider h2 span {
      display: block;
      color: #ffeb40;

<!--Main Slider-->
<section class="main-slider">

  <div class="main-slider-carousel owl-carousel owl-theme">

    <div class="slide" style="background-image:url('{% static 'main/images/XD3.png' %}')">
      <div class="auto-container">
        <div class="content">
          <div class="rating">
            <i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
            <span class="sr-only">Loading...</span>
            <i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
            <span class="sr-only">Loading...</span>
            <i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
            <span class="sr-only">Loading...</span>
            <i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
            <span class="sr-only">Loading...</span>
          </div>
          <h2> <span> Text </span> </h2>
        </div>
      </div>
    </div>

我强调，输入#000000作为#ffeb40的颜色，没有任何改变。

Answer 1

当有人遇到同样的问题时，我会把我的解决方案贴出来。

你需要创建一个新的.css文件，比如说：override.css。

你必须把它放在bootstrap.css的 href行下面，在我的例子中。

<link href="{% static 'main/css/bootstrap.min.css'%}" rel="stylesheet">
<link href="{% static 'main/css/style.css'%}" rel="stylesheet">
<link href="{% static 'main/css/responsive.css'%}" rel="stylesheet">
<link href="{% static 'main/css/override.css'%}" rel="stylesheet">

然后你要写下和你的style.css文件里一样的东西 但在每行代码的末尾都要写上 !important。

.main-slider .rating .fa{
color:#FFD700 !important;
font-size:50px !important;

}

它将改变你所需要的一切，并覆盖颜色或字体大小，你在你的bootstrap模板。

干杯。