Bootstrap Élément 100% De Largeur

Je veux créer une alternance de 100% des blocs de couleur. Un "idéal" de la situation est illustrée comme une pièce jointe, ainsi que la situation actuelle.

Configuration souhaitée:

Actuellement:

Ma première idée était de créer une div de classe, donnez-lui une couleur de fond, et de lui donner 100% de largeur.

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

Cependant, vous pouvez voir que, de toute évidence, cela ne fonctionne pas. Il est confiné à une zone conteneur. J'ai essayé de fermer le récipient et qui ne fonctionne pas non plus.

Pourriez-vous inclure le code que vous travaillez avec? Sans cela, tout ce que je peux dire, c'est que vous avez à faire assurez-vous que le contenant des balises pour la div n'ont pas de largeur 100%
Salut Michael, merci pour la réponse. Voici la partie du code, je travaille avec: <div class="container"> <div class="row"> <div class="span12"><img src="img/logo.png" width="960px"></center></div> <div class="block">content</div>

InformationsquelleAutor user1589214 | 2012-08-10

La container classe est intentionnellement pas 100% de largeur. Il est différent des largeurs fixes en fonction de la largeur de la fenêtre d'affichage.

Si vous souhaitez 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>

.ligne a besoin d'un .conteneur ou dans ce cas .conteneur de fluide.
Si vous utilisez l'ancienne version de bootstrap de la feuille de style de la container-fluid sera la cause d'une barre de défilement horizontale. Pour résoudre ce ajouter à votre feuille de style .container-fluid{ padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }

InformationsquelleAutor Ross Allen

29

C'est comment vous pouvez atteindre votre configuration souhaitée avec Bootstrap 3:
```
<div class="container-fluid">
    <div class="row"> 
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    ... your content here ...
                </div>
            </div>
        </div>
    </div>
</div>
```
La container-fluid partie fait en sorte que vous pouvez changer l'arrière-plan sur toute la largeur. Le container partie permet de s'assurer que votre contenu est encore 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.
- En effet ça ressemble à du "ni conteneur empilable" getbootstrap.com/css/#overview-container, alors attendez-vous à quelques questions ici (mais je vais encore utiliser votre solution je pense).
- Il est intéressant de noter cependant que le conteneur de liquide de classe n'est pas disponible dans le bootstrap 3.0, mais est disponible sur 3.1 et plus
InformationsquelleAutor jvannistelrooy
26

RÉPONSE RAPIDE
1. Utiliser plusieurs PAS IMBRIQUÉE .containers
2. Enveloppez ces .containers vous voulez avoir une pleine largeur de fond dans un div
3. Ajouter un fond de CSS pour l'emballage div
Violons: Simple: https://jsfiddle.net/vLhc35k4/ , Conteneur des frontières: 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'INFO

NE PAS UTILISER LES CONTENEURS IMBRIQUÉS

Beaucoup de gens (à tort) suggèrent, que vous devez utiliser les conteneurs imbriqués.
Eh bien, vous devriez PAS.

Ils ne sont pas ment être imbriqués. (Voir "Les conteneurs" dans la section docs)

COMMENT IL FONCTIONNE

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

Le bootstrap conteneurs ne sont pas tenus d'être les enfants directs d'un corps, ils sont juste des contenants avec du rembourrage et peut-être certains d'écran-largeur variable des largeurs fixes.

Si une grille de base .container a une certaine largeur fixe, il est également l'auto-centrée horizontalement.

Il n'y a pas de différence, si vous mettez comme:
1. Enfant Direct d'un corps
2. Enfant Direct d'un de base div qui est un enfant direct d'un corps.
Par "de base" div je veux dire div qui n'ont pas de CSS modifier sa frontière, le rembourrage, les dimensions, la position ou la taille du contenu. Vraiment juste un élément HTML avec display: block; CSS et éventuellement d'arrière-plan.

Mais bien sûr réglage vertical comme CSS (hauteur, padding-top, ...) ne doit pas casser le bootstrap grille 🙂

Bootstrap est lui-même en utilisant la même approche

...Tout est propre site web et dans "JUMBOTRON" exemple:

http://getbootstrap.com/examples/jumbotron/
- Cette réponse est très complète et inflexible que l'imbrication des conteneurs à l'intérieur d'autres conteneurs est une "très mauvaise idée" (comme "de passage du flux de' mauvais dans Ghostbusters) et il pointe vers un Bootstrap site de référence qui l'a confirmé. Y compris un conteneur à l'intérieur d'un simple div est la suggestion et le fait que Bootstrap utiliser cette technique sur leur Jumbotron exemple me dit que java.le web est aujourd'hui le gagnant!
- ce devrait être voté comme la réponse correcte!
- que jumbotron exemple supprimé toutes mes questions.
InformationsquelleAutor jave.web
17

Il existe une solution de contournement à l'aide de vw. Est utile lorsque vous ne pouvez pas créer un nouveau récipient de liquide.
Ce, à l'intérieur d'un classique "container" div sera pleine taille.
```
.row-full{
 width: 100vw;
 position: relative;
 margin-left: -50vw;
 left: 50%;
}
```
Après cela, il est à la barre latérale de problème (merci à @Typhlosaurus), résolu avec cette fonction js, en l'appelant sur le document de charge et de 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;
}
```
- C'est extrêmement proche d'un idéal de réponse qui ne nécessite pas de changement pour l'ensemble de la mise en page, et parfois ce sera suffisant, cependant il y a des questions subtiles avec des barres de défilement. L' .ligne complète de remplir l'intégralité de la fenêtre, en ignorant les barres de défilement, à la différence d'un conteneur de liquide pour remplir la totalité de la fenêtre avec ou sans les barres de défilement en fonction de si la barre de défilement s opaque.
- source de mise à jour. Merci!
- Wow. La js a fait le tour, j'ai cherché pendant des heures sur une solution. Mon problème est que le contenu est entré dans un cms, et donc ne peut pas changer l'extérieur html. Voudrais vraiment savoir si il existe une solution sans js.
InformationsquelleAutor benedex82

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

InformationsquelleAutor Seb33300

3

Dans le bootstrap 4, vous pouvez utiliser w-100 " classe (w largeur, et de 100 en 100%)

Vous pouvez trouver de la documentation ici:
https://getbootstrap.com/docs/4.0/utilities/sizing/
- La meilleure réponse si vous êtes en utilisant Bootstrap 4
InformationsquelleAutor Dina
1

Désolé, aurait demandé votre css ainsi. Comme c'est, fondamentalement, ce que vous avez besoin de regarder est de donner à votre conteneur div style .container { width: 100%; } dans votre css, puis le joint de divs héritera de ce aussi longtemps que vous ne leur donnez pas de leur propre largeur. Vous avez été aussi manque un peu de balises de fermeture, et la </center> ferme un <center> sans qu'il ne soit jamais ouvert, au moins dans cette section de code. Je ne savais pas si tu voulais que l'image dans le même div qui contient votre contenu ou de les séparer, j'ai donc créé deux exemples. J'ai changé la largeur de l'img à 100px tout simplement parce que jsfiddle propose une petite zone d'affichage. Laissez-moi savoir si ce n'est pas ce que vous cherchez.

de contenu et d'image distincts: http://jsfiddle.net/QvqKS/2/

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

InformationsquelleAutor Michael Peterson
0

Je me demande pourquoi quelqu'un serait d'essayer de "remplacement" de la largeur du conteneur, puisque son but est pour 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 si il y a des réponses).

Dans ma situation, je voulais avoir tous les contenu (toutes les pages) rendu à l'intérieur d'un conteneur, donc c'était le morceau de code à partir 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, j'ai eu un arrière-plan de l'en-tête de l'image, je voudrais remplir toute la largeur de l'écran, de sorte que la solution était de faire de l'Index.cshtml comme ceci:
```
@section featured {

<div class="intro-header">
    <div class="container">SOME CONTENT WITH A NICE BACKGROUND</div>
</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, étant donné que les articles sont fabriqués dans le but d'autoriser (ou forcer) vue de remplacer dynamiquement un peu de contenu dans la mise en page.

InformationsquelleAutor Alisson
0

Bien que les gens ont mentionné que vous aurez besoin d'utiliser .conteneur de fluide dans ce cas, mais vous allez également avoir à retirer le rembourrage de bootstrap.

InformationsquelleAutor Fahad Uddin

La réponse suivante n'est pas exactement optimal par toute mesure, mais j'ai besoin de quelque chose qui maintient sa position à l'intérieur du conteneur, tandis qu'il s'étend à l'intérieur de la div entièrement.

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

InformationsquelleAutor adamj

0

Au lieu de
```
style="width:100%"
```
essayez d'utiliser
```
class="col-xs-12"
```
il vous permettra d'économiser 1 caractère 🙂

InformationsquelleAutor Yevgeniy Afanasyev

Vous devez vous connecter pour publier un commentaire.

RÉPONSE RAPIDE

PLUS D'INFO

NE PAS UTILISER LES CONTENEURS IMBRIQUÉS

COMMENT IL FONCTIONNE

Bootstrap est lui-même en utilisant la même approche