twitter-bootstrap 多个堆叠的全宽背景图像与 Bootstrap 3.0
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18671572/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multiple stacked full-width background images with Bootstrap 3.0
提问by victorhooi
I'm trying to put together a static webpage using Bootstrap 3.0.
我正在尝试使用 Bootstrap 3.0 组合一个静态网页。
The page is basically a narrative, and consists of a series of stacked sections with background images, with text and other images/elements overlaid on top.
该页面基本上是一个叙述，由一系列带有背景图像的堆叠部分组成，文本和其他图像/元素覆盖在顶部。
The page is just designed to be scrolled from top to bottom, and each section's background image should fill the horizontal width.
页面只是设计为从上到下滚动，每个部分的背景图像应填充水平宽度。
Later on, I'll also be adding parallax with the images using Skrollr (https://github.com/Prinzhorn/skrollr).
稍后，我还将使用 Skrollr ( https://github.com/Prinzhorn/skrollr)为图像添加视差。
However, right now, I'm struggling to get working HTML/CSS with Bootstrap.
但是，现在，我正在努力使用 Bootstrap 来处理 HTML/CSS。
Initially, I thought I could do something like this:
最初，我认为我可以做这样的事情：
<body>
<div class="container">
<section id="first">
<div class="row annoucement col-md-4 col-md-offset-4">
<h1>The story of...</h1>
</div>
</section
<section id="second">
<div class="row gallery col-md-4 col-md-offset-4">
<!-- Image gallery boxes -->
</div>
</section
</div>
and then in the CSS:
然后在 CSS 中：
#first {
background: url(img/1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
However, the background images aren't visible - the #first element is 1140px x 0px, so the image isn't showing.
但是，背景图像不可见 - #first 元素为 1140px x 0px，因此图像未显示。
I suspect I'm not using the tag types correctly - any suggestions of how I can get the above layout working with Bootstrap?
我怀疑我没有正确使用标签类型 - 关于如何使用 Bootstrap 获得上述布局的任何建议？
采纳答案by koala_dev
Your markup for the grid system is incorrect, you should look at the examplesfrom the docs, basically the .rowshould be a container element, also if you want the background to cover the whole page then you can't have the sections inside the container, this is what I'd suggest:
您对网格系统的标记不正确，您应该查看文档中的示例，基本上.row应该是一个容器元素，如果您希望背景覆盖整个页面，那么您不能在容器内放置部分，这就是我的建议：
<body>
<section id="first">
<div class="container">
<div class="row announcement">
<div class="col-md-4 col-md-offset-4">
<h1>The story of...</h1>
</div>
</div>
</div>
</section>
<section id="second">
<div class="container">
<div class="row gallery">
<div class="col-md-4 col-md-offset-4">
<!-- Image gallery boxes -->
</div>
</div>
</div>
</section>
</body>
Though you may want to use a larger span size for your content, because I believe col-md-4 would be too small, but that's for you to decide :)
虽然您可能希望为您的内容使用更大的跨度大小，因为我相信 col-md-4 会太小，但这由您决定:)
