Question

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 </head>
 <body>
    <div style="background-color:grey">
        <div class="col-lg-12">
           <h1>hello</h1>
        </div>
   </div>
</body>
</html>

Hey there!, first post here, can anybody tell me why this won't work? i've simplified my code to the maximum. The thing is that it will work if i make my browser window smaller than 1200px.

Answer 1

您的网页存在的问题是您没有使用bootstrap网格支持所需的所有结构：列应该在行中，行应该在容器中，有关详细信息，请参阅bootstrap documentation

以下代码修改按预期工作：

<!DOCTYPE html>
<head>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/c\
ss/bootstrap.min.css">
</head>
<body>
  <div style="background-color:grey" class="container">
    <div class="row">
      <div class="col-lg-12">
        <h1>hello</h1>
      </div>
    </div>
  </div>
</body>
</html>

（从技术上讲，问题出现是因为＆＃34; col-lg-12＆＃34;类使得包含＆＃34; hello＆＃34的div成为一个浮点数，所以它不再包含在div中灰色背景，然后灰色div的高度为0，因此不可见。）

Answer 2

将位置或高度属性添加到div

<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div style="background-color:grey;position:absolute">
    <div class="col-lg-12">
       <h1>hello</h1>
    </div>
 </div>
</body>
</html>

why cant I change the backround with bootstrap?

2 个答案: