web-dev-qa-db-ja.com

ブートストラップのコンテナ内に100％の画面幅のdivを作成する方法は？

私は次のマークアップを持っているとしましょう：

<div class="container">
    <div class="row">
        <div class="col-md-12">
            ...
            <div class="full-width-div">
            </div>
        </div>
    </div>
</div>

.full-width-divを画面の幅いっぱいに引き伸ばす方法は？現在、コンテナ内で制限されているためです。

htmlcsscss3twitter-bootstraptwitter-bootstrap-3
48
Irshu

これは今日も活発に見られる2019年の回答

おそらく.containerを.container-fluidに変更する必要があります。これにより、コンテナーは画面全体を拡大します。これにより、その内部のdivが必要に応じて自然に伸びるようになります。

一部の状況で引き続き機能する2015年の元のハック

そのdivをコンテナーの外側にプルする必要があります。 divにその親よりも広くストレッチするように要求していますが、これは一般的に推奨されない方法です。

何らかの理由でdivからそれを引き出すことができない場合、このCSSを使用して位置スタイルを変更する必要があります。

.full-width-div {
    position: absolute;
    width: 100%;
    left: 0;
}

絶対の代わりに固定を使用することもできますが、スクロールしても移動しません。

67
Cody

containerではなく、container-fluidを使用する必要があります。例を参照してください： http://www.bootply.com/onAFpJcslS

31
Shawn Taylor

Full-width-divが画面の100％に拡大しないのは、親の「コンテナ」が画面の約80％しか占有していないためです。

画面に100％引き伸ばしたい場合は、「full-width-div」の位置を固定するか、「container」ではなく「container-fluid」クラスを使用します。

Bootstrap 3ドキュメントを参照してください： http://getbootstrap.com/css/#grid

2
Renesansz