Question

我在设置jumbotron类的背景颜色和在导航栏中设置文本颜色时遇到麻烦。当我从类更改为id时，它可以工作，但是我不明白为什么在使用类时它不起作用（请注意，背景颜色在navbar中有效，但颜色不起作用）。使用内联样式时，我曾工作过，但我想在CSS中对其进行样式设置。添加或更改背景颜色通常没问题，但是我是Bootstrap的新手，所以在使用CSS时可能会遇到一些我不了解的限制或我错过的东西？

    h1{
      text-align: center;
    }
    
    p{
      text-align: center;
    }
    
    .navbar{
      background-color: #d9b38c;
      color: white; /*this doesn't work*/
    }
    
    .jumbotron{
      background-color: #cccc99; /*this won't work either*/
    }

    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
     
        <title>Hytte til leie</title>
      </head>
      <body>
    
        <div class="jumbotron">
          <h1> LEI DIN DRØMMEHYTTE </h1>
          <p> Vi finner hytten som passer perfekt til deg </p>
        </div>
    
        <nav class="navbar">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">DinHytteDrøm</a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Hjem</a></li>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">Våre hytter <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Fjellhytter</a></li>
                <li><a href="#">Skogshytter</a></li>
                <li><a href="#">Sjøhytter</a></li>
              </ul>
            </li>
            <li><a href="#">Informasjon</a></li>
            <li><a href="#">Kontakt oss</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><span class="glyphicon glyphicon-user"></span> Lag bruker </a></li>
            <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Logg inn </a></li>
          </ul>
        </div>
      </div>
    </nav>
    
    <div class="container-fluid">
      <h3>Collapsible Navbar</h3>
      <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
      <p>Only when the button is clicked, the navigation bar will be displayed.</p>
    </div>
    
      </body>
    </html>

Answer 1

您可以尝试使用内部CSS，或者如果不想这样做，则可以在CSS中使用重要标记

.jumbotron{
   background-color: #cccc99!important; /*this won't work either*/
 }

Answer 2

这是因为CSS优先级。如果要覆盖引导程序提供的任何样式，只需在CSS中使用！important 。

.jumbotron{
   background-color: #cccc99 !important; 
 }

，然后将CSS文件放在 bootstrap.min.css 文件下面。这都是关于优先级的。最后一个优先。喜欢：

<style> 标记内的

<head> 将比外部CSS文件具有更高的优先级。并且内联CSS 将优先于上述两项。

HTML / CSS（引导程序）类样式不起作用

2 个答案: