我在bootstrap中有容器的一些问题.我的目标是拥有一个与内容一样高的容器.例如：
@H_502_2@<div class="container">
<img src="#.jpg" height="200px" width="300px">
</div>
在上面的例子中,容器应该与图像一样高.然而,即使我通过CSS将容器的最小高度设置为0px,我的浏览器自动将元素样式中的最小高度为594px.浏览器中的源代码如下所示：
@H_502_2@<div class="container" style="min-height: 594px;"> <img src="#.jpg" height="200px" width="300px"> </div>但是在HTML文件中,没有定义样式元素. Chrome和IE都会发生这种情况.因此,CSS代码(min-height：0px;)被忽略.
CSS：
@H_502_2@.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的指示,其中的网格具有该父级.因此,您无法设置容器的高度.
你想做的是：
@H_502_2@<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定义,因此…
@H_502_2@.container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; max-width: 900px; overflow:hidden; min-height:0px !important; }但是我一直发现“！important”条款只是使CSS变得混乱.
