使用Bootstrap 3.0实现多个堆叠的全宽度背景图片

Question

使用Bootstrap 3.0实现多个堆叠的全宽度背景图片

htmlcsstwitter-bootstrap

6

我正在尝试使用Bootstrap 3.0创建一个静态网页。

该页面基本上是一个叙述，由一系列堆叠的带有背景图像的部分组成，其中文本和其他图像/元素重叠在顶部。

I've

该页面只需从顶部向下滚动，每个部分的背景图像应填充水平宽度。

稍后，我还将使用Skrollr（https://github.com/Prinzhorn/skrollr）添加图像的视差效果。

然而，现在，我正在努力使用Bootstrap制作HTML/CSS。

最初，我认为我可以做这样的事情：

<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元素的大小为1140px x 0px，因此图片没有显示。

我怀疑我没有正确使用标签类型- 你有没有一些关于如何在Bootstrap中使上述布局工作的建议？

- victorhooi

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- omma2289 · Accepted Answer

您的网格系统标记不正确，您应该查看文档中的示例，基本上.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>

尽管您可能希望使用更大的跨度来容纳内容，因为我认为col-md-4太小了，但这取决于您自己的决定 :)