Question

我正在尝试使用背景颜色的全宽jumbotron。由于某种原因，它保持默认布局与灰色背景。我跟着bootstrap website的代码，所以我不知道什么是错的。

在我的index.html

中

<div class="jumbotron">
    <div class="container-fluid">
        <h1>Hello, world!</h1>

        <p>...</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
    </div>
</div>

在我的CSS中：

.jumbotron {
    position: relative;
    background: #ff0000;
    width: 100%;
    height: 100%;
}

看起来相当直接......猜我错了。

Answer 1

DavidK ，你好。
这是一个简单的演示。
使用两种方式显示Jumbotron。

如果您遇到问题，并且您的自定义css不在Bootstrap css链接之下，那么这可能是您的问题。

使用“全页”视图查看。

或者使用此 Fiddle 。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Starter Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<style>
body {
  padding-top: 50px;
}
.spacer {
  margin-top: 2%;
  margin-bottom: 2%;
}    
.block {
  height: 200px;
}  

.jumbotron {
    background: #ff0000;
    min-height: 25vh;
}    
</style>

</head>

<body>

    <nav class="navbar navbar-inverse navbar-fixed-top ">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand " href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

<div class="container col-lg-12 spacer"></div>
        
 <div class="jumbotron">
    <div class="container bg-primary block">
    ...
    </div>
</div>

<div class="container col-lg-12 spacer"></div>        
        
<div class="jumbotron">
    <h1>Hello, world!</h1>
    <p>...</p>  
</div>
        
        
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    
</body>
</html>

Bootstrap jumbotron没有调整

1 个答案: