更改div的颜色背景

时间：2016-05-30 14:05:16

标签： html css twitter-bootstrap

所以今天我一直在学习如何使用Bootstrap（我很新），我遇到了一些问题。这是我的代码：

<!DOCTYPE html>
<html>

<head>
  <title>Home</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<body>

  <nav class="navbar navbar-inverse">
    <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="#">Home</a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a>
          </li>
        </ul>
        </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a>
          </li>
          <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="container">
      <div class="jumbotron text-center">
        <h1>Welcome!</h1>
        <p>Random text here that doesn't matter</p>
        <a class="btn btn-default">Watch now!</a>
        <a class="btn btn-info">Tweet it</a>
      </div>
    </div>
  </nav>
  <div class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
      <p class="navbar-text pull-left">Site created: 30/05/16</p>
      <a href="http://www.youtube.com" class="navbar-btn btn-danger btn pull-right">Subscribe on YouTube</a>
    </div>
  </div>
</body>

</html>

基本上一切都很好但是，如果你在浏览器中查看我的代码为.html或其他什么，你会看到在顶部的黑色导航菜单下，有一个jumbotron很好，但是背景它是黑色的，我不想要，我希望它像页面的其余部分一样白。我是新来的，所以我甚至无法弄清楚如何做到这一点所以任何帮助都会受到高度赞赏。对不起，我已经尝试尽可能具体，但我真的很陌生，我希望有人可以帮助我。

TH。

5 个答案:

答案 0 :(得分：3)

获取

<div class="container">
<div class="jumbotron text-center">
<h1>Welcome!</h1>
<p>Random text here that doesn't matter</p>
<a class="btn btn-default">Watch now!</a>
<a class="btn btn-info">Tweet it</a>
</div>
</div>

以外的

nav标签

您无需在CSS中进行任何更改

答案 1 :(得分：0)

希望我理解你是对的。如果您不想更改任何html标记，您只需要通过向所需元素添加自定义css类来更改颜色，并覆盖boostrap所做的事情：

<nav class="navbar navbar-inverse myJumbotronColor">
  <div class="container-fluid myNavBarColor">
    <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="#">Home</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
  <div class="container">
    <div class="jumbotron text-center">
      <h1>Welcome!</h1>
      <p>Random text here that doesn't matter</p>
      <a class="btn btn-default">Watch now!</a>
      <a class="btn btn-info">Tweet it</a>
    </div>
  </div>
</nav>
<div class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    <p class="navbar-text pull-left">Site created: 30/05/16</p>
    <a href="http://www.youtube.com" class="navbar-btn btn-danger btn pull-right">Subscribe on YouTube</a>
  </div>
</div>

自定义css：

.myNavBarColor {
  background-color: rgb(34, 34, 34);
  border-color: rgb(8, 8, 8);
}
.myJumbotronColor {
  background-color: #fff;
  border: none;
}

https://jsfiddle.net/6gnp4doL/

请注意，您的html中有标记错误：

<div class="collapse navbar-collapse" id="myNavbar">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a>
      </li>
    <!-- these two tag should not be here
    </ul>
    </li> -->
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a>
      </li>
      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a>
      </li>
    </ul>
  </div>

答案 2 :(得分：0)

你可以使用css作为导航栏颜色，但我仍然感到困惑，实际上你想要的是什么：

 .navbar-inverse .navbar-toggle {
        background-color: #efefef;
    }
    .navbar-inverse .navbar-toggle:hover {
        background-color: #efefef;
    }

JSfiddle for the same

答案 3 :(得分：0)

将container div放在nav之外。

下面：

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>

<head>
  <title>Home</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<body>

  <nav class="navbar navbar-inverse">
    <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="#">Home</a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a>
          </li>
        </ul>
        </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a>
          </li>
          <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
    <div class="container">
      <div class="jumbotron text-center">
        <h1>Welcome!</h1>
        <p>Random text here that doesn't matter</p>
        <a class="btn btn-default">Watch now!</a>
        <a class="btn btn-info">Tweet it</a>
      </div>
    </div>
  <div class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
      <p class="navbar-text pull-left">Site created: 30/05/16</p>
      <a href="http://www.youtube.com" class="navbar-btn btn-danger btn pull-right">Subscribe on YouTube</a>
    </div>
  </div>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：-1)

您可以查找哪个元素具有实际背景。 然后转到你的CSS文件（假设你制作一个）并将背景颜色设置为白色。 让我们假设导航栏标题类具有背景颜色

将此添加到您的CSS文件

    .nav-bar
    {
         background-color: white !imporant;
    }

！important是覆盖为调整元素属性而编写的任何其他样式表行。

相关问题
最新问题