html – 如何设置引导容器的最小高度

发布时间：2020-12-14 18:59:43 所属栏目：资源来源：网络整理

导读：我在bootstrap中有容器的一些问题.我的目标是拥有一个与内容一样高的容器.例如： div class="container" img src="#.jpg" height="200px" width="300px"/div 在上面的例子中,容器应该与图像一样高.然而,即使我通过CSS将容器的最小高度设置为0px,我的浏览器自

我在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;
}

有人有什么想法可以解决这个问题吗？

解决方法

这里有两件事情.

>您没有正确使用容器类.
>你试图覆盖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>

Here您可以在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变得混乱.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!