2

Twitterブートストラップを使用してWebサイトを設計しています。ヘッダー領域を除いて、すべて正常に動作しています。

スクリーンショット

.container-fluid を使用して全幅の背景を設定しました。そして、.container を使用してコンテンツを 960px 以内に配置しました。しかし、問題はロゴの背景にあります。.container クラスの外側の左側の領域をロゴの背景領域で埋める必要があります。出来ますか？

これが私のマークアップです-

<div class="container-fluid full-width">
        <div class="row-fluid header-top">
            <div class="container">
                <div class="span4 logo-area">
                    <div class="logo">
                        <h1> <a href=""> hello.</a></h1>
                    </div>
                </div>

                <div class="menu span8">
                    <div class="navbar">
                        <ul class="nav" id="nav">
                            <li><a href="#"> Home </a></li>
                            <li><a href="#"> Menu Item2 </a></li>
                            <li><a href="#"> Menu Item3 </a></li>
                            <li><a href="#"> Menu Item4 </a></li>
                            <li><a href="#"> Menu Item5 </a></li>
                            <li><a href="#"> Menu Item6 </a></li>               
                        </ul>

                    </div>
                </div>
            </div>
        </div>
    </div>

前もって感謝します。

4

2 に答える 2

1

それはそうですが、コンテナーの外側に配置するか、CSS を使用してコンテナーを制御するposition:absoluteなどして、コンテナーのフローから削除する必要があります。

何かのようなもの：

          <div class="logo">
                <h1> <a href=""> hello.</a></h1>
            </div>

<style>
.logo {
position:absolute;
top:100px;
left:100px;
}
</style>

<div class="container-fluid full-width">
        <div class="row-fluid header-top">
            <div class="container">

                <div class="menu span8">
                    <div class="navbar">
                        <ul class="nav" id="nav">
                            <li><a href="#"> Home </a></li>
                            <li><a href="#"> Menu Item2 </a></li>
                            <li><a href="#"> Menu Item3 </a></li>
                            <li><a href="#"> Menu Item4 </a></li>
                            <li><a href="#"> Menu Item5 </a></li>
                            <li><a href="#"> Menu Item6 </a></li>               
                        </ul>

                    </div>
                </div>
            </div>
        </div>
    </div>
于 2013-07-19T15:20:24.963 に答える