6

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

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

我有

该页面只是设计为从上到下滚动，并且每个部分的背景图像应填充水平宽度。

稍后，我还将使用 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 元素为 1140 像素 x 0 像素，因此图像未显示。

我怀疑我没有正确使用标签类型 - 关于如何让上述布局与 Bootstrap 一起使用的任何建议？

4

1 回答 1

5

您对网格系统的标记不正确，您应该查看文档中的示例，基本上.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 会太小，但这由您决定:)

于 2013-09-07T09:00:55.667 回答