web-dev-qa-db-fra.com

Comment créer une div de 100% de la largeur de l'écran dans un conteneur dans bootstrap?

Disons que j'ai le balisage suivant:

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

Maintenant, comment faire .full-width-div s'étirer sur toute la largeur de l'écran? Parce qu'actuellement, c'est limité à l'intérieur du conteneur.

htmlcsscss3twitter-bootstraptwitter-bootstrap-3
48
Irshu

réponse de 2019 car cela se voit encore activement aujourd'hui

Vous devriez probablement changer le conteneur. En conteneur, ce qui obligera votre conteneur à étirer tout l'écran. Cela permettra à n'importe quelle div à l'intérieur de s'étirer naturellement aussi large que nécessaire.

hack original de 2015 qui fonctionne encore dans certaines situations

Vous devriez tirer cette div en dehors du conteneur. Vous demandez à une div de s’étendre plus large que son parent, ce qui n’est généralement pas recommandé.

Si vous ne pouvez pas le sortir du div pour une raison quelconque, vous devriez changer le style de position avec ce css:

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

Au lieu de absolu, vous pouvez également utiliser fixe, mais il ne bougera pas lorsque vous faites défiler.

67
Cody

Vous devez utiliser container-fluid et non container. Voir l'exemple: http://www.bootply.com/onAFpJcslS

31
Shawn Taylor

La raison pour laquelle votre div-full-width ne s'étend pas à 100% sur votre écran est due à son "conteneur" parent qui occupe seulement environ 80% de l'écran.

Si vous souhaitez l'étirer à 100%, vous pouvez soit fixer la position "full-width-div", soit utiliser la classe "container-fluid" au lieu de "conteneur".

voir Bootstrap _ 3 documents: http://getbootstrap.com/css/#grid

2
Renesansz