Question

我正在尝试创建一个类似于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>

行不会延伸到屏幕边缘。观点也不一致。我知道要看很多，但我找不到任何在线资源的示例，或者我可以看一个简单的模板。

Answer 1

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

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

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

.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>

P.S。在您的示例中，<a>标记未使用</a>标记关闭，而.container未在.jumbotron未关闭后关闭。

Answer 2

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

body {
    margin: 0;
}

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

2 个答案: