100% de la largeur de Twitter Bootstrap 3 modèle

Je suis un bootstrap débutant et j'ai un 100% de largeur modèle que je veux le code avec bootstrap. La première colonne commence dans le coin gauche et j'ai une carte de Google, les étire à l'extrême droite. Je pensais que je pouvais le faire avec container-fluid classe, mais qui ne semble pas être plus disponible. Je n'ai aucune idée de comment réaliser cette mise en page avec bootstrap 3. Je suis l'aide de la Géométrie du modèle PSD de themeforest, le lien ici si vous voulez voir la mise en page : http://themeforest.net/item/geometry-design-for-geolocation-social-networkr/4752268

Vous pouvez personnaliser Bootstrap pour utiliser @container-* largeurs de 100%. Aussi, .container-fluid est de retour dans 3.1.0. 🙂

InformationsquelleAutor Samia Ruponti | 2013-08-26

245

Pour Bootstrap 3, vous auriez besoin d'utiliser un wrapper et fixer sa largeur à 100%.
```
.container-full {
  margin: 0 auto;
  width: 100%;
}
```
Ici est un exemple de travail sur Bootply

Si vous préférez ne pas ajouter une classe personnalisée, vous pouvez obtenir une très large mise en page (pas à 100%) en enveloppant le tout à l'intérieur de col-lg-12 (large mise en page de démonstration)

Mise à jour pour Bootstrap 3.1

La container-fluid classe a retourné dans le Bootstrap 3.1, donc cela peut être utilisé pour créer une mise en page à largeur (sans CSS nécessaire)..

Bootstrap 3.1 démo
- Vous devez être prudent. La ligne a a-15px marge à gauche et à droite. Qu'est compensé par le conteneur qui a un 15px rembourrage. La meilleure façon est d'ajouter qu'un rembourrage pour votre conteneur plein, puis utilisez les lignes et les colonnes pour faire de votre grille.
- Je suis aide class="conteneur-plein" et qui semble être au travail.
- Je fais un travail en utilisant padding: 0; width:100%;
- Utilisez un récipient de fluide avec un col-md-12 pour obtenir la taille réelle de la ligne. Il y aura une gouttière (standard 15px sur chaque côté) qui doit être enlevé. Manière la plus simple est de le supprimer manuellement, à l'aide de la css personnalisé: #SomeId div { padding-left:0; padding-right:0; }
- Merci pour l'astuce... conteneur de fluide a bien fonctionné pour moi, pas d'autres changements requis. La gouttière ne présente pas un problème parce que le réglage de la couleur d'arrière-plan des contenus de la classe de rendu de la couleur sur les bords, comme souhaité, alors que le texte et d'autres éléments ont été joliment légèrement décalé, aussi comme on le souhaite.
InformationsquelleAutor Zim
30

C'est la structure de base pour 100% mise en page à largeur dans Bootstrap v3.0.0. Vous ne devriez pas envelopper votre <div class="row"> avec container classe. Cause container classe va prendre beaucoup de marge et ce ne sera pas vous fournir plein écran (100% de la largeur) mise en page où le bootstrap a supprimé container-fluid classe à partir de leur mobile-première de la version v3.0.0.

Donc commencer à écrire <div class="row"> sans classe de conteneur et vous êtes prêt à aller avec 100% de largeur de tracé.
```
<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap Basic 100% width Structure</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">



<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>
    
    <script src="//code.jquery.com/jquery.js"></script>
    
    <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 le live de sortie de là. http://bootply.com/82136 Et la base de bootstrap 3 100% de la largeur de mise en page, j'ai créé un gist. vous pouvez l'utiliser. Obtenez l'essentiel de ici

Me répondre si vous avez besoin de plus d'obtenir de l'aide. Merci.
- je vous remercie. Il n'est jamais venu à mon esprit! celui-ci fonctionne mieux que la solution précédente.
- Cette solution ajoute une barre de défilement horizontale dans FF en raison de la marge .ligne. Le bootstrap docs disent que .ligne doit toujours être utilisé à l'intérieur d'un conteneur à cause de cela - les Gens qui cherchent à créer des mises en page fluide (ce qui signifie que votre site s'étend sur toute la largeur de la fenêtre d'affichage) doit conclure de leur contenu de la grille dans un contenant élément avec padding: 15px 0; pour compenser la marge: 0 -15px; utilisé sur .les lignes. - getbootstrap.com/css/#grid-intro
- Nealio est correct. Vous devriez toujours utiliser un récipient. J'enveloppe ma pleine largeur des lignes dans un .conteneur complet avec ce CSS déclaration: .container-full { padding: 0 15px; }
- J'ai essayé le padding: 15px 0; comme suggéré ici et sur le getbootstrap.com docs, mais aussi toujours la barre de défilement horizontale.
- Cela semble être un bug dans le bootstrap. Je l'ai résolu en ajoutant ce qui suit à l'élément conteneur où votre plein écran les lignes sont placées: padding: 0 15px; margin-left: 0px; margin-right: 0px;
- Ne sont pas tous .rows doivent être contenues dans un .container?
- Erik de Fleurs, a écrit un grand article sur le conteneur ou la ligne de relation, je recommande de le lire!
InformationsquelleAutor Shaharia Azam

À l'aide de Bootstrap 3.3.5 et .container-fluid, c'est la façon dont je reçois toute la largeur sans les gouttières ou à défilement horizontal sur mobile. Notez que .container-fluid a été réintroduit dans les 3.1.

Pleine largeur sur mobile/tablette, 1/4 de l'écran sur ordinateur de 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>

InformationsquelleAutor angularsen

20

Vous avez droit à l'aide div.container-fluid et vous avez aussi besoin d'un div.row enfant. Ensuite, le contenu doit être placé à l'intérieur sans aucun colonnes de la grille.
Si vous avez un coup d'oeil à la documentation, vous pouvez trouver ce texte:
- Lignes doit être placé à l'intérieur d'un .conteneur (largeur fixe) ou sur .récipient de liquide (pleine largeur) pour un alignement correct et le rembourrage.
- Utilisation des lignes pour créer des groupes horizontaux de colonnes.
Pas à l'aide de colonnes de la grille, c'est ok, comme indiqué ici:
- Contenu devrait être placé à l'intérieur des colonnes et des colonnes de peut être immédiate enfants de lignes.
Et en regardant cette exemple, vous pouvez lire ce texte:

Pleine largeur, seule colonne: Pas de grille de classes sont nécessaires pour la pleine largeur des éléments.

Voici en direct d'un exemple montrant quelques éléments à l'aide de la bonne mise en page. De cette façon, vous n'avez pas besoin de tout CSS personnalisé ou hack.

InformationsquelleAutor gerardnll
5

Dans le BOOTSTRAP 4 vous pouvez utiliser
```
<div class="row m-0">
my fullwidth div
</div>
```
... si vous n'en utiliser qu'un .ligne sans l' .m-0 comme un haut niveau de la div, vous aurez indésirables de la marge, ce qui rend la page plus large que la fenêtre du navigateur et de provoquer une barre de défilement horizontale.

InformationsquelleAutor Sandy Maier

Vous devez vous connecter pour publier un commentaire.