我有一个html引导程序文件，我正在尝试使用custom.css进行一些更改，但更改不起作用。
例如，我无法更改标签“h1”或类“carousel-inner”（我试图将负边距顶部消除标头和旋转木马之间的空间）。
这是我的HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap for Web Design</title>
<meta name="description" content="A Tuts+ course">
<!-- Mobile Specific Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>
<body>
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="#">SmartEvents</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">Criar evento</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Registo <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-header">Admin & Dashboard</li>
<li><a href="#">Admin 1</a></li>
<li><a href="#">Admin 2</a></li>
<li class="divider"></li>
<li class="dropdown-header">Portfolio</li>
<li><a href="#">Portfolio 1</a></li>
<li><a href="#">Portfolio 2</a></li>
</ul>
</li>
<li><a href="#">Iniciar Sessão</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<!-- Carousel
================================================== -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="3000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="images/slide1a.jpg" alt="...">
<div class="carousel-caption">
<h1>EVENTOS AO MINUTO</h1>
<h3>Compra e venda de bilhetes. Promoção de eventos.</h3>
<!-- <p><a class="btn btn-lg btn-primary" href="#" role="button">Criar evento</a></p>-->
</div>
</div>
<div class="item">
<img src="images/slide2a.jpg" alt="...">
<div class="carousel-caption">
<h1>EVENTOS AO MINUTO</h1>
<h3>Compra e venda de bilhetes. Promoção de eventos.</h3>
</div>
</div>
<div class="item">
<img src="images/slide3a.jpg" alt="...">
<div class="carousel-caption">
<h1>EVENTOS AO MINUTO</h1>
<h3>Compra e venda de bilhetes. Promoção de eventos.</h3>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- Carousel -->
<div class="container">
<!-- FOOTER -->
<footer>
<p class="pull-right"><a href="#">Back to top</a></p>
<p>This Bootstrap layout is compliments of Bootply. · <a href="http://www.bootply.com/108847">Edit on Bootply.com</a></p>
</footer>
</div><!-- /.container -->
<!-- Latest compiled and minified JavaScript -->
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>
和我的custom.css
@charset "UTF-8";
/* CSS Document */
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #000; /*Sets the text hover color on navbar*/
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active >
a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: white; /*BACKGROUND color for active*/
background-color: #030033;
}
.navbar-default {
background-color: #333c4e;
border-color: #333c4e;
}
.dropdown-menu > li > a:focus {
color: #41ae32;
text-decoration: none;
background-color: #41ae32; /*change color of links in drop down here*/
}
.dropdown-menu > li > a:hover{
background-color: #41ae32;
}
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: silver; /*Change rollover cell color here*/
}
.navbar-default .navbar-nav > li > a {
color: white; /*Change active text color here*/
}
<!--TEXTOS-->
h1{
font-size:40px;
color:#FFF;
background-color: forestgreen;
}
<!--Carousel-->
.carousel-inner {
position: relative;
overflow: hidden;
width: 100%;
margin-top: -20px;
}
任何人都可以帮助我吗？ 非常感谢你
圣保罗。
答案 0 :(得分：0)
答案 1 :(得分：0)
您使用了错误的行注释，
改变这个：
<!--TEXTOS-->
h1{
font-size:40px;
color:#FFF;
background-color: forestgreen;
}
<!--Carousel-->
.carousel-inner {
position: relative;
overflow: hidden;
width: 100%;
margin-top: -20px;
}
对此：
/*TEXTOS*/
h1{
font-size:40px;
color:#FFF;
background-color: forestgreen;
}
/*Carousel*/
.carousel-inner {
position: relative;
overflow: hidden;
width: 100%;
margin-top: -20px;
}