Question

我无法弄清楚为什么我体内的容器 - 液体div在顶部有灰色背景，也不知道如何摆脱它。我假设它是引导程序正在添加的东西。我能够用

摆脱它

container-fluid *{
    background-color:#fff;
}

然后这导致了jumbotron按钮背景的问题。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resuarant Name</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/custom.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
    <nav class="navbar navbar-right">
        <div class="container">
            <ul class="menuItems">
                <li>Menu</li>
                <li>Reservations</li>
                <li>Reviews</li>
                <li>Photos</li>
            </ul>
          <form id="searchForm">
            Search
            <input type="text" name="search"><br/>

            </form>
        </div>
        </nav>
<nav class="navbar-header">
            <div class="container">
              <ul class="mainMenu">
                    <img id="logo" src="images/logo001.png"/>
                    <li>Home</li>
                    <li>History</li>
                    <li>Recipes</li>
                    <li>Shop</li>
                    <li>Contact</li>
                 </ul>   
    </div>
        </nav>

</head>

<body>
<div class="container-fluid">
          <div class="jumbotron">
          <h1>Hello, world!</h1>
          <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
          <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
      </div>
</div>
</body>
</html>

的CSS：

.menuItems{ 
    display:inline-block;
    list-style:none;
    float:right;
}

.menuItems li{
    float:right;
    padding: 0 10px;
}

#searchForm{
    float:right;

}

#logo{
    float:left;
    max-height:80px;
    padding-left:200px;

}


.mainMenu{
    float:left;
    width:100%;
    margin-right:auto;
    margin-left:auto;
    padding:20px 50px; 
    border-top:dotted thin;
    border-bottom:dotted thin;
}

.mainMenu li{
    display:inline-block;
    float:right;
    padding: 20px 25px;
}

.welcomePost *{

}


.jumbotron *{
    float:right;
    padding: 0 150px;
}

Answer 1

灰色背景来自jumbotron，这是它的默认颜色，只需改变这样的jumbotron颜色

.jumbotron { 
    background-color: // whatever color you want or you can also make it "none" 
}

有关Jumbotron的更多信息：https://getbootstrap.com/

这个灰色背景来自哪里？

1 个答案: