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

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

这里发生了两件事.

1. 您没有正确使用容器类.
2. 您正在尝试为容器类重写Bootstrap的CSS

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>

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

话虽如此,如果你绝对必须覆盖Bootstrap CSS,那么我会尝试将"!important"子句用于我的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

通常，如果您使用 bootstrap，您可以执行此操作将最小高度设置为 100%。

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

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

您还可以使用以下类从 CSS 执行此操作

.stickDamnFooter{min-height: 100vh;}

如果这个类没有粘住你的页脚，只需添加position:fixed; 到同一个 css 类，你一生中都不会遇到这个问题。干杯。