Question

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

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

在上面的示例中，容器应该只与图像一样高。但是，即使我通过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

这里发生了两件事。

您没有正确使用容器类。
您正试图覆盖容器类

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，那么我会尝试使用＆＃34;！important＆＃34;我的CSS定义的子句就是这样......

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

但我总是发现＆＃34;！important＆＃34;条款只是为了凌乱的CSS。

Answer 2

通常，如果您使用的是引导程序，则可以将最小高度设置为100％。

 <div class="container-fluid min-vh-100"></div>

这还将解决页脚不粘在底部的问题。

您也可以使用以下类在CSS中进行操作

.stickDamnFooter{min-height: 100vh;}

如果该类没有使您的页脚变粘，请添加位置：固定；到同一个CSS类，您将一生都不会遇到这个问题。干杯。

Answer 3

您是否在height: auto; div上尝试了.container？

这是fiddle，如果更改img高度，容器高度将调整为它。

修改

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

将此行添加到.container班级

min-height:0px !important;

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

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

3 个答案: