Récipient de liquide dans le Bootstrap 3

Comment faire récipient de liquide dans le bootstrap 3?

Dans le bootstrap 2.3.2 .container-fluid classe est là. Mais maintenant, dans le bootstrap 3 est absent et il n'est qu' .container classe. S'il vous plaît aider moi.

  • N'utilisez pas de .container juste de commencer avec un .row>.col-*-n (.container-fluid est redondant d'un .row)
  • Bootstrap 3 En d'autres termes, en utilisant des Amorces 2.3.2 du fluide comportement par défaut pour la colonne de structures.
  • ne pas laisser les .conteneur de rendre le contenu de la ligne de commencer tout le chemin à gauche (quand on regarde sur la md ou lg), vs avoir un rembourrage sur la gauche et la droite?
InformationsquelleAutor Hari Krishnan | 2013-11-05
  1. 32

    Bootstrap 3.0 déplacé vers une "mobile d'abord". .container est vraiment qu'il y a dans le cas où vous avez besoin/envie d'un boxy mise en page. mais, si vous dispenser le div.container-fluid entièrement, vous êtes de gauche avec un fluide de mise en page par défaut.

    par exemple, pour avoir un deux-colonne de fluide de mise en page, il suffit d'utiliser:

    <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>
    • a parfaitement fonctionné, merci
    • Juste un conseil, d'une ligne négative rembourrage est là pour correspondre à col rembourrage
    • mauvaise réponse. .container-fluid est ce que vous appelez les “lignes du décalage négatif rembourrage”, un peu plus du point de vue sémantique. personnes: utilisation class="container-fluid" au lieu de style="padding:0 15px;".
    • Gardez à l'esprit que j'ai écrit cette pré-v3.1 où ils ont rajouté .container-fluid.
    • eh bien, vous ne le mentionnez, bien 🙂
    • Veuillez mettre à jour votre réponse par des commentaires. 🙂

    InformationsquelleAutor Brad Christie
  2. 20

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

    Vous pouvez utiliser le row comme un récipient de liquide, mais vous devez ruser un peu pour éviter une barre de défilement horizontale. Extrait de la documentation (http://getbootstrap.com/css/#grid)..

    "Les gens qui cherchent à créer entièrement de liquide
    des mises en page (ce qui signifie que votre site s'étend sur toute la largeur de la fenêtre d'affichage)
    doit envelopper leur contenu de la grille dans un contenant élément avec padding: 0
    15px; pour compenser la marge: 0 -15px; utilisé sur .les lignes."

    Plus sur les modifications de l'3.x: http://bootply.com/bootstrap-3-migration-guide

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

    Mise à JOUR pour Bootstrap 3.1

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

    • "container-fluid est revenue encore une fois dans le Bootstrap 3.1" - c'est déroutant! Comment est récipient liquide différent de pas de conteneur à tous?
    • Voir la doc. "Les lignes doivent être placées à l'intérieur d'un .conteneur (largeur fixe) ou sur .récipient de liquide (pleine largeur) pour un alignement correct et le rembourrage"
    InformationsquelleAutor Zim
  3. 13

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

    Commettre #62736046 ajoutée ".conteneur de fluide de variation pour l'ensemble de la largeur des conteneurs et des mises en page".

    InformationsquelleAutor Martin
  4. 4

    J'ai simplement la configuration de la règle CSS suivante où toute une ligne qui est un enfant du conteneur de fluide n'auront plus de marge négative qui compense le système de grille.

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

    Je vais test pour voir si cela crée des problèmes avec d'autres fixe la largeur de la grille de mises en page.

    InformationsquelleAutor Bryce Wilson
  5. 1

    Il y a des bonnes réponses ici, je vais donc essayer d'éviter mon auto à répéter avec mes points suivants sur le sujet:

    1. .conteneur de fluide a été supprimé dans la version 3.0, mais maintenant il est de retour en 3.4 (cette info est dans la réponse, mais je voulais le mettre sur la réponse)
    2. Pour obtenir la dernière version de go ici ou de l'utilisation de Nuget.
    3. Lignes doivent être placées à l'intérieur d'un .conteneur (largeur fixe) ou sur .récipient de liquide (pleine largeur) pour un alignement correct et le rembourrage.
    4. Pour les dernières infos sur le Conteneur s'il vous plaît aller ici pour Bootstrap CSS
    InformationsquelleAutor Deep