使用引导程序创建跨越屏幕宽度的行 - Creating a row that spans the width of the screen using bootstrap

我正在尝试创建一个类似于这个的布局，其中不同的部分跨越屏幕的整个宽度。我正在查看布局的html/css，无法弄清楚为什么我的视图没有做同样的事情。(我对创建页面相对较新(。

我正在使用php来简化创建页面，所以我有几个文件。

.jumbotron{
    background: gray; 
    height: 50%;
    margin-top: 10px; 
}
.jumbotron p, h1 {
    text-align: center;
}
.nav {
    text-align: center; 
    padding: 0; 
    margin: 0;  
    background-color: red;
    height: 10%;
}
.nav li {
    display: inline-block;
    margin-right: 5%;
    margin-left: 5%;  
}
.container #about {
    background: blue; 
    height: 50%; 
}
.container #me {
    background: blue; 
    height: 50%; 
}

<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">
    <!-- Bootstrap -->
    <link href="dist3/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div class="navbar navbar-default navbar-fixed-top"> 
        <div class="container">
            <ul class="nav">
                <li><a href="index.php">Home</li>
                <li><a href="about.php">About</li>
                <li><a href="contact.php">Contact</li>
            </ul><!--END .nav-->
        </div><!--END .wrapper-->
    </div><!--END .header-->
    <div class="container">
<div class="jumbotron">
    <div class="container">
        <h1>Example</h1>      
        <p>Example paragraph </p>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-lg-12 text-center">
            <div id="about">
                <span class="name">ABOUT</span>
            </div>
        </div>
    </div>  
</div>
<div class="container">
    <div class="row">
        <div class="col-lg-12 text-center">
            <div id="more">
                <span class="name">MORE</span>
            </div>
        </div>
    </div>  
</div>
</div> <!--END MAIN CONTAINER-->
</body>
</html>

行不会延伸到屏幕边缘。观点也不一致。我知道有很多东西要看，但我在网上找不到任何带有示例的资源，或者一个简单的模板供我查看。

在 Bootstrap 中，您可以将 12 列网格放在.container或.container-fluid中。如果要网格跨越最大 1170 像素，则使用前者，如果希望网格跨越整个屏幕，则使用后者。两者都在每侧都有 15 像素的水平填充，以保持其内容与屏幕边缘有一定距离。对于文本来说，这是一件好事，但是正如您注意到的那样，如果背景颜色或图像确实跨越整个宽度，那就太好了。

如果您查看链接的主题(请参阅 http://ironsummitmedia.github.io/startbootstrap-freelancer/(，您可能会注意到他们使用的.container和.container-fluid类也没有跨越屏幕的整个宽度。它们用其他元素包围它们，例如 <section class="success" id="about"> ，他们在上面放了背景色。

请参阅此示例，其中我在容器周围放置了一个具有.pink或.green背景颜色的<section>：

.pink {
  background-color: #f99;
}
.green {
  background-color: #9f9;
}
section {
  padding-bottom: 20px;  
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<section class="pink">
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12"><h3>.container-fluid</h3></div>
    </div>
    <div class="row">
      <div class="col-xs-6">Column one</div>
      <div class="col-xs-6">Column one</div>      
    </div>
  </div>
</section>
<section class="green">
  <div class="container">
    <div class="row">
      <div class="col-xs-12"><h3>.container</h3></div>
    </div>    
    <div class="row">
      <div class="col-xs-6">Column one</div>
      <div class="col-xs-6">Column one</div>      
    </div>
  </div>  
</section>

附言在您的示例中，<a> 标签没有用 </a> 标签关闭，加上.jumbotron未关闭后的.container。

扩展行的问题很简单，请添加以下规则：

body {
    margin: 0;
}