0
何らかの理由で、私のCSSコードが.transformクラスでは機能しませんが、残りのコードでは機能します。HTMLコードの1つのセクションでCSSが機能しない
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;
}
CSSで 'transform'が2回定義されているのはなぜですか？最初の1つを削除してください –
cssでセレクタとして '' 'section> .transform'''を使用 – archae0pteryx