1

たとえば、ナビゲーションバーで、含まれる要素の幅を超えて div の背景を拡張することはかなり一般的です。これまでのところ、パディングとマージンを組み合わせて使用​​してきましたが、十分に機能しているようです。

ただし、画像を含む div の背景を拡張しようとしています。

<div class="row-fluid box">
 <img src="image.jpg"/>
</div>

.box{
background:red;
padding-right:100em;
padding-left:50em;
margin-left:-50em /*The background won't move left without setting the margin like
this for me*/
}

これを行うと、画像が非常に小さくなり（高さと幅の両方）、見えなくなるほどになります。これは、まったく同じ CSS スタイルを使用しているテキストでは発生しません。

私はブートストラップを使用して、div に行流体のクラスを与えています (div を含むテキストで動作したのとまったく同じ設定)。

どんな助けでも大歓迎です！

4

1 に答える 1

2

これを行う最も簡単な方法は、ブートストラップ コンテナーの外側にある div に背景を適用すること です。

何が起こっているのかを想像するのは簡単で、柔軟性があり、CSS ははるかにきれいです。

より複雑な背景レイアウトのために、ブートストラップ コンテナ div を何度でも閉じて開くことを妨げるものは何もないことを覚えておいてください。

HTML 

<div class="wideBackground">  

<div class="container">
<div class="row-fluid">
.....
</div> <!-- close row-fluid -->
</div><!-- close container -->

</div><!-- close wideBackground -->

CSS 

 .wideBackground{
 background-color:red;
}
于 2013-03-04T19:45:38.713 に答える