我在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变得混乱.
