Bootstrap Élément 100% De Largeur

je veux créer alternativement des blocs de couleur à 100%. Une situation" idéale " est illustrée comme une 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, lui donner une couleur de fond, et 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 conteneur. J'ai essayé de fermer le récipient et qui ne fonctionne pas non plus.

61
demandé sur Damjan Pavlica 2012-08-10 08:26:45

10 réponses

la catégorie container est intentionnellement dépourvue de largeur à 100%. Il est de différentes largeurs fixes en fonction de la largeur du viewport.

Si vous voulez travailler avec la pleine 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>
56
répondu Ross Allen 2014-07-25 14:50:25

Voici comment vous pouvez réaliser votre configuration désiré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 s'assure que vous pouvez changer le fond sur toute la largeur. La partie container s'assure que votre contenu est toujours enveloppé dans une largeur fixe.

Cette approche fonctionne, mais personnellement, je n'aime pas tous la nidification. Cependant, je n'ai pas trouvé mieux jusqu'à présent.

29
répondu jvannistelrooy 2015-07-06 13:00:54

QUICK ANSWER

  1. utiliser multiple Non imbriqué .container s
  2. envelopper ces .container s vous voulez avoir une pleine largeur de fond dans un div
  3. Ajouter un fond CSS à la div d'emballage

Fiddles: Simple: https://jsfiddle.net/vLhc35k4 , frontières des conteneurs: 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*/ }

POUR EN SAVOIR PLUS

N'UTILISEZ PAS DE CONTENANTS EMBOÎTÉS

beaucoup de gens ( à tort ) suggéreront, que vous devriez utiliser des conteneurs emboîtés.

Eh bien, vous devriez pas .

ils ne doivent pas être imbriqués. (Voir " conteneurs "section dans le docs)

COMMENT ÇA MARCHE

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

les conteneurs bootstrap ne sont pas nécessaires pour être les enfants directs d'un corps, ils sont juste des récipients avec un certain rembourrage et peut-être certains écran-largeur variable des largeurs fixes.

si une grille de base .container a une largeur fixe, elle est également centrée automatiquement horizontalement.

il n'y a donc aucune différence si vous le mettez comme un:

  1. enfant Direct d'un corps
  2. enfant Direct d'un de base div c'est un enfant direct d'un corps.

par "basique" div je veux dire div qui n'a pas de CSS modifiant sa bordure, son rembourrage, ses dimensions, sa position ou la taille de son contenu. Vraiment juste un élément HTML avec display: block; CSS et peut-être arrière-plan.

mais bien sûr le réglage vertical CSS (hauteur, rembourrage-dessus, ...) ne doit pas briser la grille de bootstrap: -)

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

...Tout sur son propre site web et dans son" JUMBOTRON " exemple:

http://getbootstrap.com/examples/jumbotron /

24
répondu jave.web 2016-04-16 21:44:38

il y a une solution de contournement en utilisant vw. Est utile lorsque vous ne pouvez pas créer un nouveau contenant de fluide. Cela, à l'intérieur d'un classique "conteneur div" sera pleine taille.

.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 sur la charge de document et redimensionner:

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
répondu benedex82 2016-09-13 15:40:40

si vous ne pouvez pas changer la disposition 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

3
répondu Seb33300 2016-10-14 08:20:24

Désolé, aurait demandé votre css. Comme est, fondamentalement ce que vous devez regarder est de donner à votre div conteneur le style .container { width: 100%; } dans votre css et puis les divs inclus héritera de cela aussi longtemps que vous ne leur donnez pas leur propre largeur. Il vous manquait aussi quelques balises de fermeture, et le </center> ferme un <center> sans qu'il soit jamais ouvert, au moins dans cette section de code. Je n'étais pas sûr que vous vouliez l'image dans la même div qui contient votre contenu ou séparé, j'ai donc créé deux exemples. J'ai changé la largeur de l'img à 100px simplement parce que jsfiddle offre une petite zone d'observation. Laissez-moi savoir si ce n'est pas ce que vous cherchez.

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

de contenu et d'image dans la même div (img flottait à gauche): http://jsfiddle.net/QvqKS/3/

1
répondu Michael Peterson 2012-08-10 18:38:07

je me demande pourquoi quelqu'un a essayé de" passer outre "la largeur du conteneur, puisque son but est de garder 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 avoir tout le contenu (de toutes les pages) rendu à l'intérieur d'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'accueil, J'avais une image d'en-tête d'arrière-plan que j'aimerais remplir toute la largeur de l'écran , donc la solution était de faire l'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 faire des solutions de contournement, puisque les sections sont faites dans le but de permettre (ou forcer) des vues pour remplacer dynamiquement du contenu dans la mise en page.

0
répondu Alisson 2015-10-29 01:55:56

même Si les gens ont mentionné que vous aurez besoin d'utiliser .container-liquide dans ce cas, mais vous devrez également enlever le rembourrage de bootstrap.

0
répondu Fahad Uddin 2016-01-03 10:59:24

la réponse suivante n'est absolument pas optimale, mais il me fallait quelque chose qui maintienne sa position dans le conteneur tout en étirant complètement la div 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
répondu adamj 2016-07-29 17:39:19

au lieu de

style="width:100%"

essayer d'utiliser

class="col-xs-12"

il vous sauvera 1 caractère :)

0
répondu Yevgeniy Afanasyev 2017-12-05 05:40:36