我无法在引导项目中编辑我的custom.css

Question

我有一个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;
}

谁能帮我？ 非常感谢

保罗

Answer 1

删除此评论

和 。 此语法用于html文件。 要在CSS文件中添加注释，请使用： /* TEXTOS */ 。

它应该工作。

这是一个演示

Answer 2

您使用了错误的行注释，

更改此：

<!--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;
}

我无法在引导项目中编辑我的custom.css

问题描述

2 个解决方案

解决方案1
0 2015-09-15 16:05:53

解决方案2
0 已采纳 2015-09-15 16:07:29

我无法在引导项目中编辑我的custom.css

问题描述

2 个解决方案

解决方案1 0 2015-09-15 16:05:53

解决方案2 0 已采纳 2015-09-15 16:07:29

解决方案1
0 2015-09-15 16:05:53

解决方案2
0 已采纳 2015-09-15 16:07:29