web-dev-qa-db-fra.com

Fluid Container in Bootstrap 3

Comment faire un conteneur de fluide dans bootstrap 3?

Dans bootstrap 2.3.2 .container-fluid la classe est là. Mais maintenant dans bootstrap 3 il manque et il n’ya que .container classe. Aidez-moi, s'il vous plaît.

csstwitter-bootstraplesstwitter-bootstrap-3
31
Hari Krishnan

Bootstrap . est passé à une approche "mobile first". .container n'est vraiment là que dans les cas où vous avez besoin/souhaitez une disposition en carré. mais, si vous exemptez le div.container-fluid entièrement, vous vous retrouvez avec une mise en page fluide par défaut.

par exemple, pour avoir une disposition de fluide à deux colonnes, utilisez simplement:

<body>
  <header>...</header>
  <div style="padding:0 15px;"><!-- offset row negative padding -->
    <div class="row">
      <div class="col-md-6">50%</div>
      <div class="col-md-6">50%</div>
    </div>
  </div>
  <footer>...</footer>
</body>
33
Brad Christie

Le 2.x .container-fluid a été remplacé par .container in Bootstrap 3.x ( http://getbootstrap.com/getting-started/#migration )), donc le .container est fluide, mais ce n'est pas toute la largeur.

Vous pouvez utiliser row comme conteneur de fluide, mais vous devez l’ajuster un peu pour éviter une barre de défilement horizontale. Extrait de la documentation ( http://getbootstrap.com/css/#grid ) ..

"Les personnes cherchant à créer des mises en page parfaitement fluides (ce qui signifie que votre site s'étend sur toute la largeur de la fenêtre d'affichage) doivent envelopper le contenu de leur grille dans un élément conteneur avec padding: 0 15px; pour compenser la marge: 0 -15px; utilisé sur .rows."

Plus d'informations sur les modifications apportées dans la version 3.x: http://bootply.com/bootstrap-3-migration-guide

Démo: http://bootply.com/91948

UPDATE pour Bootstrap 3.1

container-fluid est retourné dans Bootstrap 3.1. Maintenant container-fluid peut être utilisé pour créer une mise en page pleine largeur: http://www.bootply.com/116382

20
Zim

Cela a été introduit dans v3.1.0: http://getbootstrap.com/css/#grid-example-fluid

Commit # 62736046 ajouté "la variation du conteneur pour les conteneurs pleine largeur et les dispositions".

13
Martin

J'ai simplement configuré la règle CSS suivante dans laquelle toute ligne qui est un enfant de container-fluid n'aura plus de marge négative qui contrebalancera le système de grille.

.container-fluid > .row {
    margin-left: 0;
}

Je vais tester plus avant pour voir si cela crée des problèmes avec d'autres dispositions de grille à largeur fixe.

4
Bryce Wilson

Il y a de bonnes réponses ici, donc je vais essayer d'éviter de me répéter avec les points suivants sur le sujet:

  1. .container-fluid a été supprimé de la version 3.0, mais il est maintenant de retour de la version 3.4 (cette information est en réponse mais je voulais la mettre en réponse)
  2. Pour obtenir la dernière version, allez ici ou utilisez Nuget.
  3. Les rangées doivent être placées dans un conteneur. (Largeur fixe) ou .container-fluid (pleine largeur) pour un alignement et un remplissage corrects.
  4. Pour les dernières informations sur Container, veuillez vous rendre ici pour Bootstrap CSS
1
Deep