0

私の最初の Twitter Bootsrap プロジェクトに取り組んでいます。CSS/HTML を使用してからしばらく経ちましたが、ご容赦ください。私の質問は：

バナー画像の左側をサイドバー メニュー列の下に表示するにはどうすればよいですか? サイドバー列のテクスチャは透明な png です。簡単な修正だと思いますが...今は思いつきません！ヘルプ！:)

ここに私のページがあります。

4

2 に答える 2

1

本当に簡単な解決策は、バナー画像を親コンテナの後ろに置き、右揃えにすることです。独自の div は必要なく、画像をトリミングする必要もありません。

また、画像と重ならないように、上部のパディングを使用して右側の列を調整する必要があります。

更新しました

ここに役立つコードがあります。変化する：

<section class="row menuPage">
    <aside class="span3 sidebar">...</aside>
    <section class="span9">
        <div class="banner"></div>
        <article>...</article> 
    </section>
</section>

に

<section class="row menuPage">
    <aside class="span3 sidebar">...</aside>
    <section class="span9">
        <article>...</article> 
    </section>
</section>

そして、次の CSS 宣言を追加します (コンテナー内の最初の子をターゲットにします)。

.section.menuPage {
    url("img/banner2.png") no-repeat scroll right top #1C0F0A;
}
于 2013-05-27T21:08:55.620 に答える
0

私が正しく理解していれば、次のようなものを探していると思います。

基本的に私がしたことは、メインの列のスパン グリッドの外側にあるバナーを独自のスパンに移動することだけでした。つまり、以前は a の下にネストされていましたがspan9、両方の列の上に移動してspan12、応答性の類似性を維持するために独自のものにしました (フィドルの応答性は機能しない可能性が高いことに注意してください)。

ここに画像の説明を入力

于 2013-05-27T21:27:06.663 に答える