Élément Bootstrap 100% largeur

96

Je souhaite créer une alternance de blocs 100% colorés. Une situation «idéale» est illustrée comme un attachement, ainsi que la situation actuelle.

Configuration souhaitée:

http://i.imgur.com/aiEMJ.jpg

Actuellement:

http://i.imgur.com/3Sl27.jpg

Ma première idée a été de créer une classe div, de lui donner une couleur d'arrière-plan et de lui donner une largeur de 100%.

.block {
    width: 100%;
    background: #fff;
}

Cependant, vous pouvez voir que cela ne fonctionne évidemment pas. Il est confiné à une zone de conteneurs. J'ai essayé de fermer le conteneur et cela n'a pas fonctionné non plus.

css twitter-bootstrap width user1589214
la source
Pourriez-vous inclure le code avec lequel vous travaillez? Sans cela, tout ce que je peux dire, c'est que vous devrez vous assurer que les balises contenant pour le div n'ont pas de largeur définie autre que 100%
Michael Peterson
Hey Michael, merci pour la réponse. Voici la section du code avec laquelle je travaille: <div class="container"> <div class="row"> <div class="span12"><img src="img/logo.png" width="960px"></center></div> <div class="block">content</div>
user1589214

Réponses:

78

La containerclasse n'a intentionnellement pas 100% de largeur. Il s'agit de largeurs fixes différentes selon la largeur de la fenêtre.

Si vous souhaitez travailler sur toute la largeur de l'écran, utilisez .container-fluid:

Bootstrap 3:

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-6"></div>
      <div class="col-lg-6"></div>
    </div>
    <div class="row">
      <div class="col-lg-8"></div>
      <div class="col-lg-4"></div>
    </div>
    <div class="row">
      <div class="col-lg-12"></div>
    </div>
  </div>
</body>

Bootstrap 2:

<body>
  <div class="row">
    <div class="span6"></div>
    <div class="span6"></div>
  </div>
  <div class="row">
    <div class="span8"></div>
    <div class="span4"></div>
  </div>
  <div class="row">
    <div class="span12"></div>
  </div>
</body>
Ross Allen
la source
1
.row a besoin d'un .container ou dans ce cas .container-fluid.
netAction
1
Si vous utilisez l'ancienne version de la feuille de style bootstrap, container-fluidune barre de défilement horizontale apparaîtra. Pour résoudre ce problème, ajoutez ceci à votre feuille de style.container-fluid{ padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }
Charlie
29

Voici comment vous pouvez obtenir la configuration souhaitée avec Bootstrap 3 :

<div class="container-fluid">
    <div class="row"> <!-- Give this div your desired background color -->
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    ... your content here ...
                </div>
            </div>
        </div>
    </div>
</div>

La container-fluidpièce garantit que vous pouvez modifier l'arrière-plan sur toute la largeur. La containerpartie garantit que votre contenu est toujours enveloppé dans une largeur fixe.

Cette approche fonctionne, mais personnellement, je n'aime pas toute l'imbrication. Cependant, je n'ai pas encore trouvé de meilleure solution.

JacobF
la source
3
En effet, il ressemble à "aucun des conteneurs n'est imbriqué " getbootstrap.com/css/#overview-container , alors attendez-vous à quelques problèmes ici (mais j'utiliserai toujours votre solution je pense).
Thibaut Barrère
Il convient de noter cependant que la classe de fluide conteneur n'est pas disponible dans bootstrap 3.0 mais est disponible sur 3.1 et versions ultérieures
Dev
29

RÉPONSE RAPIDE

  1. Utiliser plusieurs PAS IMBRIQUÉS .container s
  2. Enveloppez ceux que .containervous voulez avoir un arrière-plan pleine largeur dans undiv
  3. Ajouter un arrière-plan CSS à la division d'emballage

Fiddles: Simple: https://jsfiddle.net/vLhc35k4/ , Bordures de conteneur: https://jsfiddle.net/vLhc35k4/1/
HTML:

<div class="container">
  <h2>Section 1</h2>
</div>
<div class="specialBackground">
  <div class="container">
    <h2>Section 2</h2>
  </div>
</div>

CSS: .specialBackground{ background-color: gold; /*replace with own background settings*/ }

PLUS D'INFOS

N'UTILISEZ PAS DE CONTENEURS EMBARQUÉS

Beaucoup de gens suggéreront (à tort ) que vous devriez utiliser des conteneurs imbriqués.
Eh bien, vous ne devriez PAS .
Ils ne doivent pas être imbriqués. (Voir la section " Conteneurs " dans la documentation)

COMMENT ÇA FONCTIONNE

divest un élément de bloc, qui par défaut s'étend sur toute la largeur du corps d'un document - il existe la fonction pleine largeur. Il a également une hauteur de son contenu (si vous ne spécifiez pas le contraire).

Les conteneurs bootstrap ne sont pas obligés d'être des enfants directs d'un corps, ce ne sont que des conteneurs avec un certain rembourrage et éventuellement des largeurs fixes variables en largeur d'écran.

Si une grille de base .containera une largeur fixe, elle est également centrée automatiquement horizontalement.
Il n'y a donc aucune différence si vous le mettez comme:

  1. Enfant direct d'un corps
  2. Enfant direct d'un basique div qui est l'enfant direct d'un corps.

Par «basique», divje veux dire divqu'il n'y a pas de CSS modifiant sa bordure, son rembourrage, ses dimensions, sa position ou la taille du contenu. Vraiment juste un élément HTML avec display: block;CSS et éventuellement un arrière-plan.
Mais bien sûr, définir un CSS de type vertical (height, padding-top, ...) ne doit pas casser la grille de bootstrap :-)

Bootstrap lui-même utilise la même approche

... Partout sur son propre site Web et dans son exemple "JUMBOTRON":
http://getbootstrap.com/examples/jumbotron/

jave.web
la source
1
Cette réponse est très complète et catégorique sur le fait que l'imbrication de conteneurs dans d'autres conteneurs est une `` très mauvaise idée '' (comme `` traverser les flux '' dans Ghostbusters) et il pointe vers une référence de site Web Bootstrap qui le confirme. Inclure un conteneur dans un simple div est la suggestion et le fait que Boostrap utilise cette technique sur leur exemple Jumbotron me dit que jave.web est le gagnant d'aujourd'hui!
Volksman
cet exemple de jumbotron a supprimé toutes mes questions.
Alexander Kim
Parfois, il n'est pas possible de fermer Container et d'ouvrir un nouveau Full-with Container. La solution de contournement. Dans la réponse suivante, c'est mieux!
RubbelDeCatc
21

Il existe une solution de contournement en utilisant vw. Est utile lorsque vous ne pouvez pas créer un nouveau conteneur de fluide. Celui-ci, à l'intérieur d'un div classique «conteneur», sera en taille réelle.

.row-full{
 width: 100vw;
 position: relative;
 margin-left: -50vw;
 left: 50%;
}

Après cela, il y a le problème de la barre latérale (grâce à @Typhlosaurus), résolu avec cette fonction js, en l'appelant lors du chargement et du redimensionnement du document:

function full_row_resize(){
    var body_width = $('body').width();
    $('.row-full').css('width', (body_width));
    $('.row-full').css('margin-left', ('-'+(body_width/2)+'px'));
    return false;
}
benedex82
la source
3
C'est extrêmement proche d'une réponse idéale qui ne nécessite pas de modification de la mise en page globale, et sera parfois suffisante, mais il y a des problèmes subtils avec les barres de défilement. Le .row-full remplira toute la fenêtre, ignorant les barres de défilement, contrairement à un container-fluid qui remplira toute la fenêtre avec ou sans les barres de défilement selon que la barre de défilement est opaque.
Typhlosaurus
Sensationnel. Les js ont fait l'affaire, je cherchais depuis des heures une solution. Mon problème est que le contenu est entré dans un cms et ne peut donc pas changer le html externe. Voudrais vraiment savoir s'il existe une solution sans js.
drooh
6

Si vous ne pouvez pas modifier la mise en page HTML:

.full-width {
    width: 100vw;
    margin-left: -50vw;
    left: 50%;
}

<div class="container">
  <div class="row">
    <div class="col-xs-12">a</div>
    <div class="col-xs-12">b</div>
    <div class="col-xs-12 full-width">c</div>
    <div class="col-xs-12">d</div>
  </div>
</div>

Démo: http://www.bootply.com/tVkNyWJxA6

Seb33300
la source
2

Au lieu de 

style="width:100%"

essayez d'utiliser 

class="col-xs-12"

cela vous fera gagner 1 caractère :)

Yevgeniy Afanasyev
la source
Cette réponse n'est pas celle que demandait OP. Cela créera une colonne qui correspond à la largeur totale du .containerdiv externe , mais qui n'est pas la même que la largeur totale de la page dans le navigateur, ce que la question pose.
Hartley Brody
Je ne vois pas que OP a demandé la "pleine largeur de la page dans le navigateur". Comment tu le comprends?
Yevgeniy Afanasyev
2

Parfois, il n'est pas possible de fermer le conteneur de contenu. La solution que nous utilisons est un peu différente mais évite un débordement en raison de la taille de la barre de défilement de Firefox!

.full-width {
 margin-top: 15px;
 margin-bottom: 15px;
 position: relative;
 width: calc(100vw - 10px);
 margin-left: calc(-50vw + 5px);
 left: 50%;
}

Voici un exemple: https://jsfiddle.net/RubbelDeKatz/wvt9253q

RubbelDeCatc
la source
Avec Bootstrap 4, c'est de loin la meilleure réponse. À votre santé!
Metro Schtroumpf
1

Désolé, j'aurais dû demander votre css également. En fait, ce que vous devez regarder est de donner à votre conteneur div le style .container { width: 100%; }dans votre css, puis les div inclus hériteront de cela tant que vous ne leur donnez pas leur propre largeur. Il vous manquait également quelques balises de fermeture, et la </center>ferme a <center>sans jamais être ouverte, du moins dans cette section de code. Je ne savais pas si vous vouliez que l'image soit dans le même div contenant votre contenu ou séparée, j'ai donc créé deux exemples. J'ai changé la largeur de l'image à 100px simplement parce que jsfiddle offre une petite zone de visualisation. Faites-moi savoir si ce n'est pas ce que vous recherchez.

contenu et image séparés: http://jsfiddle.net/QvqKS/2/

contenu et image dans le même div (img flottant à gauche): http://jsfiddle.net/QvqKS/3/

Michael Peterson
la source
0

Je me demande pourquoi quelqu'un essaierait de «remplacer» la largeur du conteneur, car son but est de conserver son contenu avec un peu de rembourrage, mais j'ai eu une situation similaire (c'est pourquoi je voulais partager ma solution, même s'il y a des réponses ).

Dans ma situation, je voulais que tout le contenu (de toutes les pages) soit rendu dans un conteneur, donc c'était le morceau de code de mon _Layout.cshtml:

<div id="body">

    @RenderSection("featured", required: false)

    <section class="content-wrapper main-content clear-fix">
        <div class="container">
            @RenderBody()
        </div>
    </section>
</div>

Dans ma page d'index d'accueil, j'avais une image d'en-tête d'arrière-plan que j'aimerais remplir sur toute la largeur de l'écran , donc la solution était de rendre Index.cshtml comme ceci:

@section featured {
<!-- This content will be rendered outside the "container div" -->
<div class="intro-header">
    <div class="container">SOME CONTENT WITH A NICE BACKGROUND</div>
</div>
}

<!-- The content below will be rendered INSIDE the "container div" -->
<div class="content-section-b">
    <div class="container">
        <div class="row">
          MORE CONTENT
        </div>
    </div>
</div>

Je pense que c'est mieux que d'essayer de trouver des solutions de contournement, car les sections sont créées dans le but d'autoriser (ou de forcer) les vues à remplacer dynamiquement du contenu dans la mise en page.

Alisson
la source
0

Bien que les gens aient mentionné que vous devrez utiliser .container-fluid dans ce cas, mais vous devrez également retirer le rembourrage de bootstrap.


la source
0

La réponse suivante n'est pas exactement optimale à tous égards, mais j'avais besoin de quelque chose qui maintienne sa position dans le conteneur tout en étirant complètement la div intérieure.

https://jsfiddle.net/fah5axm5/

$(function() {
    $(window).on('load resize', ppaFullWidth);

    function ppaFullWidth() {
        var $elements = $('[data-ppa-full-width="true"]');
        $.each( $elements, function( key, item ) {
            var $el = $(this);
            var $container = $el.closest('.container');
            var margin = parseInt($container.css('margin-left'), 10);
            var padding = parseInt($container.css('padding-left'), 10)
            var offset = margin + padding;

            $el.css({
                position: "relative",
                left: -offset,
                "box-sizing": "border-box",
                width: $(window).width(),
                "padding-left": offset + "px",
                "padding-right": offset + "px"
            });
        });
    }
});
Adamj
la source
0

J'utiliserais deux div `` conteneur '' séparés comme ci-dessous:

<div class="container">
   /* normal*/
</div>
<div class="container-fluid">
   /*full width container*/
</div>

Gardez à l'esprit que le conteneur-fluide ne suit pas vos points d'arrêt et qu'il s'agit d'un conteneur pleine largeur.

Arash MAS
la source