ブートストラップ3列の背景をブラウザの横にドラッグする - html、css、twitter-bootstrap-3

私はストレッチしようとしています .black 列の黒い背景がブラウザの左側にあります。コンテナを流体コンテナに設定せずにそれを達成する方法がわかりません。

ブートプライの例

これを行う方法はありますか？コンテンツは固定幅のものでなければならないので、流体コンテナを避けています。

回答：

これは、コンテナマークアップの直後に黒の背景を持つ絶対配置のdivコンテナを追加し、コンテナを相対化することで実現できます。

HTML

<div class="container relative">
<div class="col-md-3 black fill"></div>

CSS

.relative {
position: relative;
}

.fill {
position: absolute;
top:0;
left:-25%;
height:100%;
}

ここで働いている 例.

説明

1. 絶対的に配置された要素は、基本的にhtmlドキュメント内でフロートし、上、左、右、下の値に応じてブラウザウィンドウごとに配置されます。
2. ただし、絶対配置要素の祖先が相対的に配置されている場合、絶対配置要素は自分自身を配置します 相対 親コンテナに、したがって relative ブートストラップコンテナのcssクラス。
3. 絶対位置のdivの幅は、 col-md-3 クラスおよびブートストラップコンテナの左マージンを補正するために、 負 絶対位置にあるdivの25％の左の値。
4. 黒い背景のコンテナをブートストラップコンテナの高さにスナップするには、100％の高さが必要です。

上記のCSSスタイルプロパティを適切に組み合わせると、目的の結果を得ることができます。