Désolé si c'est répétitif question, mais je n'arrive pas à trouver une indication claire n'importe où. 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-fluidclasse, 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. Toute aide est très appréciée. 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
Réponses
Trop de publicités?
Pour Bootstrap 3, vous auriez besoin d'utiliser un wrapper et l'ensemble de la largeur à 100%..
.container-full {
margin: 0 auto;
width: 100%;
}
Exemple de travail sur Bootply: http://www.bootply.com/72278
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 d'un col-lg-12 (échelle de mise en page de démonstration: http://www.bootply.com/94398)
Mise à jour pour Bootstrap 3.1
L' 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: http://bootply.com/116382
Shaharia Azam
Points
670
C'est la structure de base de 100% de la largeur de layout 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é conteneur de liquide de 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">
<!-- 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 le live de sortie. 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 à partir d' ici
Me répondre si vous avez besoin de plus d'obtenir de l'aide. Merci.
gerardnll
Points
41
Vous êtes à la droite à l'aide de 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:
- Les lignes doivent être placées dans une .conteneur (largeur fixe) ou sur .récipient de liquide (pleine largeur) pour un alignement correct et le rembourrage.
- L'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:
- Le contenu doit être placé à l'intérieur des colonnes et des colonnes peut être immédiate enfants de lignes.
Et en regardant cet exemple, vous pouvez lire ce texte:
Toute la largeur de colonne simple: Pas de grille de classes sont nécessaires pour la pleine largeur des éléments.
Voici un exemple vivant 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.
