Come impostare l'altezza minima per il contenitore bootstrap

Question

Ho alcuni problemi con il contenitore in bootstrap. Il mio obiettivo è avere un contenitore che sia alto quanto il contenuto. Ad esempio:

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

Nell'esempio sopra riportato, il contenitore deve essere alto solo come l'immagine. Tuttavia, anche se imposto min-height per il contenitore tramite CSS a 0px, il mio browser integra automaticamente un'altezza minima di 594 px nello stile dell'elemento. Il codice sorgente nel browser è simile al seguente:

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

Ma nel file HTML l'elemento di stile non è definito. Ciò si verifica con Chrome e IE. Quindi, il codice CSS (min-height: 0px;) viene ignorato.

CSS:

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

Qualcuno ha un'idea su come posso risolvere questo problema?

Answer 1

Qui stanno succedendo due cose.

1. Non si sta utilizzando correttamente la classe contenitore.
2. si sta cercando di sostituire i CSS di Bootstrap per la classe contenitore

Bootstrap utilizza un sistema di griglia e la classe .container è definito in un suo CSS. La griglia deve esistere all'interno di una classe contenitore DIV. Il contenitore DIV è solo un'indicazione a Bootstrap che la griglia all'interno ha quel genitore. Pertanto, non è possibile impostare l'altezza di un contenitore.

Che cosa si vuole fare è la seguente:

<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> 

Here è possibile trovare maggiori informazioni sul sistema di griglia Bootstrap.

Detto questo, se si deve assolutamente ignorare il Bootstrap CSS quindi vorrei provare a utilizzare il "! Importante" clausola alla mia definizione CSS in quanto tale ...

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

Ma ho sempre trovato che il La clausola "! important" crea solo CSS caotici.

Answer 2

Hai provato height: auto; sul tuo .container div?

Ecco un fiddle, se si modifica l'altezza dell'immagine, l'altezza del contenitore si adatterà ad esso.

EDIT

Quindi, se "non si può" cambiare l'Inline min-height, è possibile sovrascrivere lo stile in linea con un parametro !important. Non è il modo più pulito, ma risolve il tuo problema.

aggiungere alla classe .container questa linea

min-height:0px !important;

ho aggiornato il mio violino per dare un esempio.