CSS不能在我的HTML代碼中的一段中工作

由於某些原因，我的CSS代碼不適用於.transform類，但它適用於其他代碼。CSS不能在我的HTML代碼中的一段中工作

HTML代碼

{% load staticfiles %} 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>{% block title %}Home{% endblock %}</title> 
<link rel = 'stylesheet' type="text/css" href="{% static 'change/css/bootstrap.min.css' %}"/> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<link rel = 'stylesheet' type="text/css" href='{% static 'change/css/base.css' %}'> 
</head> 
<body> 

<nav class="navbar-fixed-top navbar navbar-default navbar-inverse" id = 'navbar'> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Brand</a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 
     <li><a href="#">Link</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Link</a></li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 

<section id = 'cover'> 
    <div id = 'cover-caption'> 
     <div class = 'container-fluid'> 
      <div class = 'col-md-12' id = 'text'> 
       <h1>Get Fit Fast</h1> 
       <p>Get a six pack, big arms, wide shoulders in less than 12 weeks.</p> 
       <p>Live your life to the fullest!</p> 
      </div> 
     </div> 
    </div> 
</section> 

{#Jumbotron beginning#} 

<section class = 'transform'> 
    <div class = 'jumbotron text-center'> 
     <h1>Transformations</h1> 
     <p class = 'lead'>Following our fitness program will help you lose weight and gain muscle in a short amount of time.</p> 
     <p class = 'lead'>But dont take for it!</p> 
     <hr class = 'focus'> 
      <div class = 'container-fluid'> 
       <div class="row"> 
        <div class="col-sm-3 row-md-3"> 
        <div class="thumbnail change"> 
         <img src="{% static 'change/img/ba1.png' %}"> 
        </div> 
        </div> 

        <div class="col-sm-3 row-md-3"> 
        <div class="thumbnail change"> 
         <img src="{% static 'change/img/ba2.png' %}"> 
        </div> 
        </div> 

        <div class="col-sm-3 row-md-3"> 
        <div class="thumbnail change"> 
         <img src="{% static 'change/img/ba3.png' %}"> 
        </div> 
        </div> 

        <div class="col-sm-3 row-md-3"> 
        <div class="thumbnail change"> 
         <img src="{% static 'change/img/ba4.png' %}"> 
        </div> 
        </div> 
       </div> 
      </div> 
     <hr class = 'focus'> 
     <p>Be quiet, Im doing a toast</p> 
     <p class = 'lead'><a href="#" class = 'btn btn-primary btn-lg' role="button">learn more..</a></p> 
</div> 
</section> 


{#End of jumbotron#} 

<section class ='packs'> 
    <div class = 'container-fluid'> 
     <div class="row"> 
      <div class="col-sm-4 row-md-4"> 
      <div class="thumbnail"> 
       <img src="{% static 'change/img/arms.jpg' %}" alt="..."> 
       <div class="caption"> 
       <h3>Thumbnail label</h3> 
       <p>sss</p> 
       <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> 
       </div> 
      </div> 
      </div> 

      <div class="col-sm-4 row-md-4"> 
      <div class="thumbnail"> 
       <img src="{% static 'change/img/chest.jpg' %}" alt="..."> 
       <div class="caption"> 
       <h3>Thumbnail label</h3> 
       <p>sss</p> 
       <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> 
       </div> 
      </div> 
      </div> 

      <div class="col-sm-4 row-md-4"> 
      <div class="thumbnail"> 
       <img src="{% static 'change/img/shoulders.jpg' %}" alt="..."> 
       <div class="caption"> 
       <h3>Thumbnail label</h3> 
       <p>sss</p> 
       <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> 
       </div> 
      </div> 
      </div> 
     </div> 
    </div> 
</section> 
</body> 
</html>

CSS代碼

#navbar { 
    background: #000000; 
} 

html, body { 

    height: 100%; 

} 

body{ 
    padding-top: 50px; 
} 

#cover { 
    background: #222222 url('../img/cover.jpg') center center no-repeat; 
    color:white; 
    height: 100%; 
    display: flex; 
    text-align: center; 
    align-items: center; 
    justify-content: center; 
} 

.jumbotron{ 
    position: relative; 
    padding:0; 
    margin-top:70px; 
    background: floralwhite; 
    margin-top: 23px; 
    text-align:center; 
    margin-bottom: 0; 
} 
.container-fluid{ 
    padding:0 ; 
} 

.col-sm-3{ 
    background:rgba(157,52,99,0.7); 
} 

.transform { 
    width: 100%; 
} 

.transform img { 
    width: 100%; 
    height: 500px; 
} 

.packs { 
    width: 100%; 
} 

.packs img { 
    max-width: 100%; 
    height:200px; 
}

來源

2017-06-17 Adrian Covaci

爲什麼'transform'在你的CSS中定義了兩次？刪除第一個 –

在css中使用'''section> .transform'''作爲選擇器 – archae0pteryx

-1

變換屬性名。將類名更改爲transform1，這可能會起作用。

來源

2017-06-17 20:11:12

您最好不要選擇變換作爲類名，但它是可能的 –

CSS不能在我的HTML代碼中的一段中工作

回答

相關問題