Jak ustawić min-wysokość dla kontenera bootstrap

Question

Mam pewne problemy z kontenerem w bootstrapie. Moim celem jest posiadanie pojemnika, który jest tylko tak wysoki, jak zawartość. Na przykład:

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

W powyższym przykładzie pojemnik powinien być tylko tak wysoki, jak obraz. Jednak pomimo ustawienia minimalnej wysokości kontenera przez CSS na 0px, moja przeglądarka automatycznie integruje minimalną wysokość 594px w stylu elementu. Kod źródłowy w przeglądarce wygląda następująco:

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

Ale w pliku HTML element stylu nie jest zdefiniowany. Dzieje się tak zarówno w przeglądarce Chrome, jak i IE. W związku z tym kod CSS (min-height: 0px;) jest ignorowany.

CSS:

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

ma ktoś pomysł jak mogę rozwiązać ten problem?

Answer 1

Dwie rzeczy się tutaj dzieją.

1. Nie używasz poprawnie klasy kontenera.
2. Próbujesz zastąpić CSS Bootstrap dla klasy pojemnika

Bootstrap wykorzystuje system siatki i klasa .container jest zdefiniowana w jego własnym CSS. Siatka musi istnieć w DIV klasy kontenerowej. Kontener DIV jest tylko wskazówką do Bootstrap, że kratka wewnątrz ma tego rodzica. Dlatego nie można ustawić wysokości kontenera.

Co chcesz zrobić, jest następujący:

<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 można znaleźć więcej informacji na temat systemu siatki startowej.

W takiej sytuacji, jeśli koniecznie zastąpić Bootstrap CSS to chciałbym spróbować użyć „! Important” klauzuli do mojej definicji CSS jako takiego ...

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

Ale ja zawsze uważałem, że "! important" klauzula po prostu tworzy niechlujny CSS.

Answer 2

Czy próbowałeś height: auto; na swoim div .container?

Oto fiddle, jeśli zmienisz wysokość img, wysokość pojemnika dostosuje się do niego.

EDIT

Więc jeśli „nie może” zmienić inline min-height można nadpisać styl inline z parametrem !important. To nie jest najczystszy sposób, ale rozwiązuje twój problem.

dodać do swojej klasy .container tę linię

min-height:0px !important;

zaktualizowałem moją skrzypce podam przykład.