多个堆叠的全宽背景图像与Bootstrap 3.0 [英] Multiple stacked full-width background images with Bootstrap 3.0
问题描述
我试图使用Bootstrap 3.0组合一个静态网页。
I'm trying to put together a static webpage using 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.
稍后，我还将使用Skrollr将图像添加视差（ https://github.com/Prinzhorn/skrollr ）。
Later on, I'll also be adding parallax with the images using Skrollr (https://github.com/Prinzhorn/skrollr).
但是，现在，我很难用Bootstrap来处理HTML / CSS。
However, right now, I'm struggling to get working HTML/CSS with Bootstrap.
最初，我想我可以这样做：
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>
，然后在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;
}
但是，背景图片不可见 - #first元素是1140像素x 0px，所以图片不显示。
However, the background images aren't visible - the #first element is 1140px x 0px, so the image isn't showing.
我怀疑我没有正确使用标签类型 - 任何建议如何使上述布局工作Bootstrap？
I suspect I'm not using the tag types correctly - any suggestions of how I can get the above layout working with Bootstrap?
推荐答案
您的网格系统标记不正确，您应该查看文档中的示例，基本上 .row 应该是一个容器元素，整个页面，那么你不能有容器内的部分，这是我建议：
Your markup for the grid system is incorrect, you should look at the examples from the docs, basically the .row should 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:
<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>
虽然你可能想为你的内容使用更大的跨度大小，因为我相信col-md- 4太小了，但这是你决定：）
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 :)
这篇关于多个堆叠的全宽背景图像与Bootstrap 3.0的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
