使用引导程序创建跨越屏幕宽度的行答案

【问题标题】：Creating a row that spans the width of the screen using bootstrap使用引导程序创建跨越屏幕宽度的行
【发布时间】：2014-12-21 17:44:30
【问题描述】：

我正在尝试创建一个类似于this one 的布局，其中不同的部分跨越屏幕的整个宽度。我正在查看布局的 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>

行不会延伸到屏幕边缘。视图也不对齐。我知道有很多东西要看，但我在网上找不到任何资源，其中包含示例或简单的模板供我查看。

【问题讨论】：

您可能正在寻找container-fluid，它可以用来代替container，并且总是会拉伸以占据视口的整个宽度。
它扩展得更多，但它并没有一直扩展。
您正在嵌套 .container。下载该模板并玩转。您不能将 .container 放在 .container 的任何地方。 Jumbotron 是全宽的，但如果你用另一个元素（.container）包裹它，那么它将固定宽度。查看解压后的 CSS 中的 .container 类

标签： php html css twitter-bootstrap

【解决方案1】：

在 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。

【讨论】：

【解决方案2】：

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

body {
    margin: 0;
}

【讨论】：

它解决了我对您的问题理解的问题。如果这不是您想要的，也许可以尝试重新表述您的问题。