web-dev-qa-db-fra.com

Comment définir min-height pour bootstrap conteneur

J'ai des problèmes avec le conteneur dans le bootstrap. Mon objectif est d’avoir un contenant aussi haut que le contenu. Par exemple:

<div class="container">
  <img src="#.jpg" height="200px" width="300px">
</div>

Dans l'exemple ci-dessus, le conteneur ne doit avoir qu'une hauteur équivalente à celle de l'image. Cependant, même si j'ai défini la valeur min-height du conteneur via CSS sur 0px, mon navigateur intègre automatiquement une hauteur minimum de 594px dans le style de l'élément. Le code source dans le navigateur ressemble à ceci:

<div class="container" style="min-height: 594px;">
  <img src="#.jpg" height="200px" width="300px">
</div>

Mais dans le fichier HTML, l'élément de style n'est pas défini. Cela se produit avec Chrome ainsi que IE. Par conséquent, le code CSS (min-height: 0px;) est ignoré.

CSS:

.container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
   max-width: 900px;
   overflow:hidden;
   min-height:0px;
}

Quelqu'un at-il une idée sur la façon dont je peux résoudre ce problème?

htmlcsstwitter-bootstrapcontainers
20
Clems

Deux choses se passent ici.

  1. Vous n'utilisez pas la classe conteneur correctement.
  2. Vous essayez de remplacer le CSS de Bootstrap pour la classe de conteneur

Bootstrap utilise un système de grille et la classe .container est définie dans son propre CSS. La grille doit exister dans une classe de conteneur DIV. Le conteneur DIV est juste une indication pour Bootstrap) que la grille à l'intérieur a ce parent. Par conséquent, vous ne pouvez pas définir la hauteur d'un conteneur.

Ce que vous voulez faire est le suivant:

<div class="container-fluid"> <!-- this is to make it responsive to your screen width -->
    <div class="row">
        <div class="col-md-4 myClassName">  <!-- myClassName is defined in my CSS as you defined your container -->
            <img src="#.jpg" height="200px" width="300px">
        </div>
    </div>
</div>

Ici vous pouvez trouver plus d’informations sur le système de grille Bootstrap.

Cela étant dit, si vous DEVEZ absolument remplacer le CSS Bootstrap), j'essaierais alors d'utiliser la clause "! Important" dans ma définition CSS en tant que telle ...

.container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
   max-width: 900px;
   overflow:hidden;
   min-height:0px !important;
}

Mais j’ai toujours trouvé que la clause "! Important" permettait de créer des CSS désordonnés.

18
MikeV

Avez-vous essayé height: auto; Sur votre div .container?

Voici un violon , si vous modifiez la hauteur img, la hauteur du conteneur s’adapte à celle-ci.

[~ # ~] éditer [~ # ~]

Donc, si vous "ne pouvez pas" changer le inline min-height, Vous pouvez écraser le style inline avec un paramètre !important. Ce n'est pas le moyen le plus propre, mais cela résout votre problème.

ajouter à votre classe .container cette ligne

min-height:0px !important;

J'ai mis à jour mon violon pour vous donner un exemple.

1
Ramiz Wachtler