个人中心
gpt4 book ai didi

css - 我无法在 Bootstrap 元素中编辑我的 custom.css

转载 作者：行者123 更新时间：2023-11-28 07:11:52 25 4
gpt4 key购买 nike

我有一个 html Bootstrap 文件，我正在尝试使用 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;
}

谁能帮帮我？非常感谢你

保罗。

最佳答案

你使用了错误的行注释，

改变这个:

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

关于css - 我无法在 Bootstrap 元素中编辑我的 custom.css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32590540/

25 4 0
文章推荐： javascript - 在 Angular 函数不起作用后调用 jquery 选择器(渲染问题？)
文章推荐： ios - 使用 Facebook Pop 对 View 仿射变换进行动画处理
文章推荐： objective-c - 使用 kABPersonAddress 属性设置 addressDictionary
文章推荐： html - 最新的 Chrome : float inside of -webkit-column broken
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com