Как установить минимальную высоту для контейнера начальной загрузки

Question

У меня есть некоторые проблемы с контейнером в бутстрапе. Моя цель состоит в том, чтобы иметь контейнер, который только высок, как содержание. Например:

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

В приведенном выше примере контейнер должен быть только размером с изображение. Однако, хотя я установил min-height для контейнера с помощью CSS в 0px, мой браузер автоматически интегрирует минимальную высоту 594px в стиле элемента. Исходный код в браузере выглядит так:

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

Но в файле HTML элемент стиля не определен. Это происходит как с Chrome, так и с IE. Следовательно, код CSS (min-height: 0px;) игнорируется.

CSS:

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

кто-нибудь представление о том, как я могу решить эту проблему?

Answer 1

Здесь происходят две вещи.

1. Вы не используете класс контейнера должным образом.
2. Вы пытаетесь переопределить CSS Bootstrap для контейнерного класса

Bootstrap использует подвесную систему и класс .container определяется его собственной CSS. Сетка должна существовать в контейнерном классе DIV. Контейнер DIV - это всего лишь указание на Bootstrap, что внутри этой сетки этот родитель. Поэтому вы не можете установить высоту контейнера.

То, что вы хотите сделать, это следующее:

<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 вы можете найти более подробную информацию о системе сетки Bootstrap.

Это, как говорится, если вы абсолютно необходимо переопределить Bootstrap CSS, то я бы попробовать использовать «! Важный» пункт в моем определении CSS как таковой ...

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

Но я всегда считал, что Предложение «! important» просто создает беспорядочный CSS.

Answer 2

Вы пробовали height: auto; на своем .container div?

Здесь fiddle, если вы измените высоту img, высота контейнера приспособится к ней.

EDIT

Так что, если вы «не можете» изменить встроенный min-height, вы можете заменить встроенный стиль с !important параметром. Это не самый чистый способ, но он решает вашу проблему.

добавить в свой .container класс этой строки

min-height:0px !important;

Я обновил свою скрипку, чтобы дать вам пример.