Modèle Twitter Bootstrap 3 à 100% de largeur

134

Je suis un débutant bootstrap et j'ai un modèle 100% large que je souhaite coder avec bootstrap. La première colonne commence dans le coin gauche et j'ai une carte Google qui s'étend le plus à droite. Je pensais pouvoir le faire avec la container-fluidclasse, mais cela ne semble plus être disponible. Je n'ai aucune idée de comment réaliser cette mise en page avec bootstrap 3. J'utilise le modèle Geometry PSD de themeforest, le lien ici si vous voulez voir la mise en page: http://themeforest.net/item/geometry-design-for- géolocalisation-reseau-socialr / 4752268

html css twitter-bootstrap layout twitter-bootstrap-3 Samia Ruponti
la source
5
Vous pouvez personnaliser Bootstrap pour utiliser des @container-*largeurs à 100%. De plus, .container-fluidrevient dans la version 3.1.0. :)

Réponses:

247

Pour Bootstrap 3, vous devez utiliser un wrapper personnalisé et définir sa largeur sur 100%.

.container-full {
  margin: 0 auto;
  width: 100%;
}

Voici un exemple de travail sur Bootply

Si vous préférez ne pas ajouter de classe personnalisée, vous pouvez obtenir une mise en page très large (pas 100%) en enveloppant tout dans une col-lg-12( démo de mise en page large )

Mise à jour pour Bootstrap 3.1

La container-fluidclasse est revenue dans Bootstrap 3.1, donc cela peut être utilisé pour créer une mise en page pleine largeur (aucun CSS supplémentaire requis).

Démo Bootstrap 3.1

Zim
la source
13
Vous devez être prudent. La ligne a une marge de -15px à gauche et à droite. Cela est compensé par le conteneur qui a un rembourrage de 15 px. Le meilleur moyen est d'ajouter ce remplissage à votre conteneur plein, puis d'utiliser des lignes et des colonnes pour créer votre grille.
rootman
6
@rootman J'utilise class = "container container-full" et cela semble fonctionner.
Kenmore
Utilisez container-fluid avec un col-md-12 pour obtenir une ligne pleine grandeur. Il y aura une gouttière (standard 15px de chaque côté) qui doit être enlevée. Le moyen le plus simple est de le supprimer manuellement, en utilisant le css personnalisé suivant: #SomeId div {padding-left: 0; padding-right: 0; }
Martin
2
Merci pour le tuyau ... container-fluid a bien fonctionné pour moi, aucun autre changement n'est requis. La gouttière ne présentait pas de problème car la définition de la couleur d'arrière-plan de la classe contenue rendait la couleur sur les bords, comme souhaité, tandis que le texte et les autres éléments étaient légèrement décalés, également comme souhaité.
Krishna Gupta
30

Il s'agit de la structure de base complète pour une mise en page à 100% de largeur dans Bootstrap v3.0.0 . Vous ne devriez pas votre envelopper <div class="row">avec containerclasse. La containerclasse de cause prendra beaucoup de marge et cela ne vous fournira pas une mise en page plein écran (largeur 100%) où bootstrap a supprimé la classe container-fluid de leur version mobile-first v3.0.0.

Alors commencez simplement à écrire <div class="row">sans classe de conteneur et vous êtes prêt à utiliser une mise en page à 100% de largeur.

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap Basic 100% width Structure</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="http://getbootstrap.com/assets/js/html5shiv.js"></script>
  <script src="http://getbootstrap.com/assets/js/respond.min.js"></script>
<![endif]-->
<style>
    .red{
        background-color: red;
    }
    .green{
        background-color: green;
    }
</style>
</head>
<body>
    <div class="row">
        <div class="col-md-3 red">Test content</div>
        <div class="col-md-9 green">Another Content</div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</body>
</html>

Pour voir le résultat par vous-même, j'ai créé un bootply. Voir la sortie en direct ici. http://bootply.com/82136 Et la mise en page de base complète du bootstrap 3 à 100% de largeur, j'ai créé l'essentiel. vous pouvez l'utiliser. Obtenez l'essentiel d' ici

Répondez-moi si vous avez besoin d'une assistance supplémentaire. Merci.

Shaharia Azam
la source
20
Cette solution ajoute une barre de défilement horizontale dans FF en raison de la marge sur .row. La documentation de bootstrap indique que .row doit toujours être utilisé dans un conteneur pour cette raison - Les personnes qui cherchent à créer des mises en page entièrement fluides (ce qui signifie que votre site s'étend sur toute la largeur de la fenêtre) doivent envelopper leur contenu de grille dans un élément contenant avec un remplissage: 0 15px; pour compenser la marge: 0 -15px; utilisé sur .rows. - getbootstrap.com/css/#grid-intro
nealio82
5
Nealio a raison. Vous devez toujours utiliser un conteneur. J'enveloppe mes lignes pleine largeur dans un .container-full avec cette déclaration CSS:.container-full { padding: 0 15px; }
tbeseda
3
Cela semble être un bogue dans le bootstrap. Je l'ai résolu en ajoutant ce qui suit à l'élément conteneur où sont placées vos lignes plein écran: padding: 0 15px; marge gauche: 0px; marge droite: 0px;
Jorre
2
Tous les .rows n'ont-ils pas besoin d'être contenus dans un .container?
skube
2
Erik Flowers a écrit un excellent article sur la relation conteneur / ligne, je recommande de le lire!
idleberg
27

En utilisant Bootstrap 3.3.5 et .container-fluid, c'est ainsi que j'obtiens toute la largeur sans gouttières ni défilement horizontal sur mobile. Notez que cela a .container-fluidété réintroduit dans la version 3.1.

Pleine largeur sur mobile / tablette, 1/4 d'écran sur le bureau

<div class="container-fluid"> <!-- Adds 15px left/right padding --> 
  <div class="row"> <!-- Adds -15px left/right margins -->
    <div class="col-md-4 col-md-offset-4" style="padding-left: 0, padding-right: 0"> <!-- col classes adds 15px padding, so remove the same amount -->
      <!-- Full-width for mobile -->
      <!-- 1/4 screen width for desktop -->
    </div>
  </div>
</div>

Pleine largeur sur toutes les résolutions (mobile, table, bureau)

<div class="container-fluid"> <!-- Adds 15px left/right padding -->
  <div class="row"> <!-- Adds -15px left/right margins -->
    <div>
      <!-- Full-width content -->
    </div>
  </div>
</div>
angularsen
la source
20

Vous utilisez correctement div.container-fluidet vous avez également besoin d'un div.rowenfant. Ensuite, le contenu doit être placé à l'intérieur sans aucune colonne de grille. Si vous regardez les documents, vous pouvez trouver ce texte:

  • Les lignes doivent être placées dans un .container (largeur fixe) ou .container-fluid (pleine largeur) pour un alignement et un rembourrage corrects.
  • Utilisez des lignes pour créer des groupes horizontaux de colonnes.

Ne pas utiliser de colonnes de grille, c'est bien comme indiqué ici:

  • Le contenu doit être placé dans des colonnes et seules les colonnes peuvent être des enfants immédiats de lignes.

Et en regardant cet exemple, vous pouvez lire ce texte:

Pleine largeur, colonne unique : aucune classe de grille n'est nécessaire pour les éléments pleine largeur.

Voici un exemple en direct montrant certains éléments utilisant la mise en page correcte. De cette façon, vous n'avez pas besoin de CSS personnalisé ou de hack.

Gérardnll
la source
5

Dans BOOTSTRAP 4, vous pouvez utiliser

<div class="row m-0">
my fullwidth div
</div>

... si vous utilisez simplement un .row sans le .m-0 comme div de niveau supérieur, vous aurez une marge indésirable, ce qui rend la page plus large que la fenêtre du navigateur et provoque une barre de défilement horizontale.

Félix
la source