web-dev-qa-db-fra.com

100% largeur Twitter Bootstrap 3 modèle

Je suis un débutant bootstrap et j'ai un modèle 100% large que je veux coder avec bootstrap. La première colonne commence au coin gauche et j'ai une carte Google qui s'étend le plus à droite. Je pensais pouvoir faire cela avec la classe container-fluid, mais cela ne semble plus être disponible. Je ne sais pas du tout comment obtenir cette présentation avec bootstrap 3. J'utilise le modèle PSD Geometry de themeforest, le lien ici si vous souhaitez voir la présentation: http: // themeforest. net/item/geometry-design-for-geolocation-social-networkr/4752268

htmlcsstwitter-bootstraplayouttwitter-bootstrap-3
133
Samia Ruponti

Pour Bootstrap 3, vous devez utiliser un wrapper personnalisé et définir 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 de classe personnalisée, vous pouvez obtenir une mise en page très large (pas 100%) en enveloppant le tout dans un col-lg-12 ( démonstration de la mise en page large )

Mise à jour pour Bootstrap 3.1

La classe container-fluid est retournée dans Bootstrap 3.1, ce qui permet de créer une mise en page pleine largeur (aucun CSS supplémentaire n'est requis).

démo de Bootstrap 3.1

245
Zim

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

Il suffit donc de commencer à écrire <div class="row"> sans classe de conteneur et vous êtes prêt à utiliser une disposition de largeur à 100%.

<!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 vous-même, j'ai créé un bootply. Voir la sortie en direct là-bas. http://bootply.com/82136 Et la base complète bootstrap 3 mise en page 100% largeur, j'ai créé un Gist. vous pouvez l'utiliser. Obtenez le résumé de ici

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

29
Shaharia Azam

Avec Bootstrap 3.3.5 et .container-fluid, c’est comme cela que j’obtiens une largeur totale sans gouttières ni défilement horizontal sur mobile. Notez que .container-fluid a été réintroduit en 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>
27
angularsen

Vous avez raison d'utiliser div.container-fluid et vous avez également besoin d'un enfant div.row. Ensuite, le contenu doit être placé à l'intérieur sans aucune colonne de la grille. Si vous consultez la documentation, vous trouverez le texte suivant:

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

Ne pas utiliser les colonnes de la grille c'est ok comme indiqué ici:

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

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

Largeur totale, colonne unique : Aucune classe de grille n'est nécessaire pour les éléments de largeur totale.

Voici un exemple en direct montrant quelques éléments en utilisant la disposition correcte. De cette façon, vous n'avez besoin d'aucun CSS ou hack personnalisé.

20
gerardnll

Dans BOOTSTRAP 4, vous pouvez utiliser

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

... si vous utilisez simplement un fichier .row sans le fichier .m-0 en tant que div de niveau supérieur, vous aurez une marge non souhaitée, ce qui rend la page plus large que la fenêtre du navigateur et génère une barre de défilement horizontale.

3
Sandy Maier