如何设置bootstrap容器的最小高度

I have some issues with the container in bootstrap. My goal is to have a container which is only as high as the content. For example:

我在bootstrap中遇到了一些容器问题。我的目标是拥有一个只有内容高的容器。例如：

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

In the example above, the container should be only as high as the image. However, even though I set min-height for the container via CSS to 0px, my browser automatically integrates a min-height of 594px in the element style. The source code in the browser looks like this:

在上面的示例中，容器应该只与图像一样高。但是，即使我通过CSS将容器的最小高度设置为0px，我的浏览器也会自动在元素样式中集成最小高度594px。浏览器中的源代码如下所示：

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

But in the HTML file the style element is not defined. This occurs with Chrome as well as IE. Hence, the CSS code (min-height: 0px;) is being ignored.

但是在HTML文件中没有定义样式元素。 Chrome和IE都会出现这种情况。因此，CSS代码（min-height：0px;）被忽略。

CSS:

CSS：

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

Has anyone an idea on how I can fix this issue?

有谁知道如何解决这个问题？

2 个解决方案

#1

Two things are happening here.

这里发生了两件事。

You are not using the container class properly.
您没有正确使用容器类。
You are trying to override Bootstrap's CSS for the container class
您正在尝试为容器类重写Bootstrap的CSS

Bootstrap uses a grid system and the .container class is defined in it's own CSS. The grid has to exist within a container class DIV. The container DIV is just an indication to Bootstrap that the grid within has that parent. Therefore, you cannot set the height of a container.

Bootstrap使用网格系统，而.container类在其自己的CSS中定义。网格必须存在于容器类DIV中。容器DIV只是Bootstrap的一个指示，表明其中的网格具有该父网格。因此，您无法设置容器的高度。

What you want to do is the following:

你想要做的是以下内容：

<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 you can find more info on the Bootstrap grid system.

在这里，您可以找到有关Bootstrap网格系统的更多信息。

That being said, if you absolutely MUST override the Bootstrap CSS then I would try using the "!important" clause to my CSS definition as such...

话虽这么说，如果你绝对必须覆盖Bootstrap CSS，那么我会尝试在我的CSS定义中使用“！important”子句......

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

But I have always found that the "!important" clause just makes for messy CSS.

但我总是发现“！important”子句只会造成凌乱的CSS。

#2

Have you tried height: auto; on your .container div?

你试过身高吗：自动;在你的.container div？

Here is a fiddle, if you change img height, container height will adjust to it.

这是一个小提琴，如果你改变img高度，容器高度将适应它。

EDIT

编辑

So if you "can't" change the inline min-height, you can overwrite the inline style with an !important parameter. It's not the cleanest way, but it solves your problem.

因此，如果您“无法”更改内联最小高度，则可以使用！important参数覆盖内联样式。这不是最干净的方式，但它解决了你的问题。

add to your .containerclass this line

添加到.containerclass这一行

min-height:0px !important;

min-height：0px！important;

I've updated my fiddle to give you an example.

我已经更新了我的小提琴给你一个例子。

#1