Élément Bootstrap 100% largeur

Question 1

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:

Actuellement:

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.

Question 2

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>

Question 3

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.

Question 4

RÉPONSE RAPIDE

Utiliser plusieurs PAS IMBRIQUÉS .container s
Enveloppez ceux que .containervous voulez avoir un arrière-plan pleine largeur dans undiv
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:

Enfant direct d'un corps
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/

Question 5

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;
}

Question 6

Dans bootstrap 4, vous pouvez utiliser la classe 'w-100' (w comme largeur et 100 comme 100%)

Vous pouvez trouver la documentation ici: https://getbootstrap.com/docs/4.0/utilities/sizing/

Question 7

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

Question 8

Au lieu de

style="width:100%"

essayez d'utiliser

class="col-xs-12"

cela vous fera gagner 1 caractère :)

Question 9

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

Question 10

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/

Question 11

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.

Question 12

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

Question 13

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"
            });
        });
    }
});

Question 14

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.