Question

我是bootstrap的新手，我正在尝试学习基础知识。但是，我为div设置了一个颜色背景，只有在调整浏览器大小时才会显示。这是我的代码：

<html>
<body>
    <div id="header">
         <div class="col-md-8"><img src="images/logo.png"></div>
         <div class="col-md-4">
             <br />
             <br />
             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
             <p>
                 <a href="#">HOME</a>
                 &nbsp; &nbsp; &nbsp; 
                 <a href="#">SERVICES</a> 
                 &nbsp;&nbsp;&nbsp; 
                 <a href="#">NEWS</a> 
                 &nbsp;&nbsp;&nbsp; 
                 <a href="#">CAREERS</a> 
                 &nbsp;&nbsp;&nbsp; 
                 <a href="#">CONTACT</a>
             </p>
         </div>
    </div>
</body>
</html>



.container {
    margin:0px;
    padding:0px;
}           

#header{
    background-color:#e4e4e4;
}

提前谢谢。

Answer 1

我将您的代码复制粘贴在代码笔中，即使我没有调整浏览器的大小，它也适用于我并应用背景颜色。我发现代码中没有html，body和container的开放标记。确保它没有破裂！快乐的编码！ http://codepen.io/lakshman_kotipalli/pen/qZBbVN?editors=1010

<html>

<head>
</head>
 <body>
<div id="header">
<div class="col-md-8">
  <img src="images/logo.png">
</div>
<div class="col-md-4"><br/><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <p>
    <a href="#">HOME</a> &nbsp; &nbsp; &nbsp; <a href="#">SERVICES</a>&nbsp;&nbsp;&nbsp; <a href="#">NEWS</a> &nbsp;&nbsp;&nbsp; <a href="#">CAREERS</a> &nbsp;&nbsp;&nbsp; <a href="#">CONTACT</a></p>
 </div>
 </div>
</body>
</html>

Answer 2

您必须使用bootstarp媒体查询

    /* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {
        #header{
    background-color:red; }
    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {
     #header{
    background-color:white; }
    }
    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {
    #header{
    background-color:green; }
    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {
    #header{
    background-color:blue; }
    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {
    #header{
    background-color:black;}
    }

Answer 3

你也可以使用，覆盖bootstrap css代码，！重要的财产，如。

#header{ background-color: #000 !important;}

Answer 4

在我看来，不要编辑bootstarp文件，创建一个css文件并在该文件中添加 bootstarp媒体查询，

不要忘记在引导程序之前包含您的css文件

例如

<link href="css/style.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">

Bootstrap：Div背景色

4 个答案: