6

Bootstrap 3.0 を使用して静的 Web ページを作成しようとしています。

このページは基本的に物語であり、背景画像を含む一連の積み重ねられたセクションで構成され、その上にテキストやその他の画像/要素が重ねられています。

私は

ページは上から下にスクロールするように設計されており、各セクションの背景画像は横幅を埋める必要があります。

後で、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で動作させる方法の提案はありますか?

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 に答える