web-dev-qa-db-fra.com

Élément d'amorçage 100% largeur

Je veux créer des blocs 100% colorés en alternance. Une situation "idéale" est illustrée en tant que pièce jointe, 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 était de créer une classe div, de lui donner une couleur de fond 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 conteneur. J'ai essayé de fermer le conteneur et cela n'a pas fonctionné non plus.

csstwitter-bootstrapwidth
66
user1589214

La classe container n'a intentionnellement pas 100% de largeur. Il existe différentes largeurs fixes en fonction de la largeur de la fenêtre.

Si vous souhaitez utiliser 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>
61
Ross Allen

Voici comment vous pouvez réaliser votre 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 partie container-fluid permet de modifier l'arrière-plan sur toute la largeur. La partie container permet de s'assurer que votre contenu est toujours enveloppé dans une largeur fixe. 

Cette approche fonctionne, mais personnellement, je n'aime pas toutes les imbrications. Cependant, je n'ai pas trouvé de meilleure solution jusqu'à présent.

29
jvannistelrooy

RÉPONSE RAPIDE

  1. Utilisez plusieurs NOT NESTED.containers
  2. Enveloppez les .containers que vous voulez avoir un arrière-plan pleine largeur dans une div
  3. Ajouter un arrière-plan CSS à la division d'habillage

Fiddles: Simple: https://jsfiddle.net/vLhc35k4/ , Bordures du 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

NE PAS UTILISER DE CONTENANTS NICHÉS

De nombreuses personnes (à tort) suggèrent d'utiliser des conteneurs imbriqués. 
Eh bien, vous devriez PAS.
Ils ne sont pas destinés à être imbriqués. (Voir la section " Conteneurs " dans la documentation)

COMMENT ÇA MARCHE

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

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

Si une grille de base .container a une largeur fixe, elle est également auto-centrée horizontalement.
Donc, il n'y a pas de différence si vous le mettez comme:

  1. Enfant direct d'un corps 
  2. Enfant direct d'une basediv qui est un enfant direct d'un corps.

Par "de base" div j'entends div qui n'a pas de code CSS modifiant sa bordure, son remplissage, 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, la définition de CSS de type vertical (hauteur, padding-top, ...) ne doit pas briser la grille de bootstrap :-)

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

... Partout c'est propre site web et dans son exemple "JUMBOTRON":
http://getbootstrap.com/examples/jumbotron/

26
jave.web

Il existe une solution de contournement utilisant vw. Est utile lorsque vous ne pouvez pas créer un nouveau conteneur de fluide ..__ Ceci, à l'intérieur d'un div de 'conteneur' classique, sera de taille normale.

.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, 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;
}
14
benedex82

Si vous ne pouvez pas modifier la présentation 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

4
Seb33300

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

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

1
Dina

Désolé, j'aurais dû demander votre css aussi. En l’état, vous devez essentiellement donner à votre div de conteneur le style .container { width: 100%; } dans votre css. Les divs incluses en hériteront alors que vous ne leur attribuez pas leur propre largeur. Il vous manquait également quelques balises de fermeture et le </center> ferme un <center> sans que celui-ci ne soit jamais ouvert, du moins dans cette section de code. Je ne savais pas si vous vouliez l'image dans le même div qui contient votre contenu ou séparément, alors j'ai créé deux exemples. J'ai changé la largeur de l'img à 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 sont séparés: http://jsfiddle.net/QvqKS/2/

contenu et image dans la même division (img flotté à gauche): http://jsfiddle.net/QvqKS/3/

1
Michael Peterson

Je me demandais pourquoi quelqu'un essaierait de "surcharger" la largeur du conteneur, puisque son objectif est de conserver son contenu avec du rembourrage, mais j'avais une situation similaire solution, même s’il y a des réponses).

Dans ma situation, je souhaitais que tout le contenu (de toutes les pages) soit restitué dans un conteneur. Il s'agissait donc du 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'accueil Index, j'avais une image d'en-tête d'arrière-plan que je voudrais remplir toute la largeur de l'écran , la solution a donc été d'utiliser Index.cshtml comme suit:

@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 de manière dynamique certains contenus de la mise en page.

0
Alisson

Au lieu de 

style="width:100%"

essayez d'utiliser 

class="col-xs-12"

cela vous sauvera 1 caractère :)

0
Yevgeniy Afanasyev

La réponse suivante n’est certes pas optimale, mais j’avais besoin de quelque chose qui maintienne sa position dans le conteneur pendant qu’il étend complètement la division interne.

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

Bien que certaines personnes aient mentionné que vous devrez utiliser .container-fluid dans ce cas, vous devrez également supprimer le rembourrage du bootstrap.

0
Fahad Uddin