2

これが可能かどうかはわかりませんが、Twitter Bootstrap を使用してスパンの幅と高さ全体を画像で埋めたいと思います。

スパン4の幅のサイドバーと残りのスパン8の画像があります。

background:cover クラスを使用してみましたが、スパンの幅のみを埋め、高さを指定した場合にのみ高さが埋められます。

HTML

<div class="container-fluid">
<div class="row-fluid col-wrap">
<div class="span4 sidebar-red col">
<h1>About</h1>

<p class="lead">The first of its kind in Toronto&hellip;</p>

<p>Workplace One offers small businesses, entrepreneurs, professionals and anyone in between, a customized and unique work environment in a shared office community.</p>

<p>Workplace One offers flexibility. With customizable offices and services, Workplace One caters to the constant evolution of a small or growing business.</p>

<p>The unique space design encourages collaboration and provides an energy that can't be found in a home office, or other professional work environment.</p>

</div><!--/span-->



<div class="span8">
<img src="img/h_ph.jpg"/>
</div><!--/span-->


</div><!--/span-->
</div><!--/row-->

前もって感謝します

JB

4

2 に答える 2

2

<img>CSS背景画像ではなくタグ付きの画像を使用している場合、Bootstrapはデフォルトですでにこれを行っています。

画像をマークアップに配置するときに画像が十分に大きい場合、親コンテナー (この場合は .span8 コンテナー) の 100% まで拡張されます。

したがって、この効果を確認するには、おそらく十分な大きさの画像をドロップする必要があります。また、通常のスタイルシートと同様に、ブートストラップ レスポンシブ スタイルシートを含めることも忘れないでください。

最後になりましたが、ストック ブートストラップ フレームワークで何かを行う方法が見つからない場合は、独自のコードを追加することをお勧めしますが、別のスタイルシートでそれを行い、そこで変更した内容を追跡してください。スタイルが適切にカスケードされるように、すべての CSS の残りの部分の下部に配置します。

そうは言っても、ブートストラップ CSS ファイルを直接変更しないでください。これは、新しいバージョンにアップグレードするときに面倒です。

于 2013-07-14T18:47:48.040 に答える