为什么这样做? - Twitter Bootstrap 2.3.1

时间:2013-03-16 02:04:39

标签: css twitter-bootstrap responsive-design

我最近在posted a question询问我如何能够垂直对齐响应式图像。我自己找到了答案,但它提出了一个更大的问题,因为我不知道它是如何或为什么有效。

看看这个jsFiddle:http://jsfiddle.net/fmwzT/1/

使用以下代码垂直对齐导航栏中的图像:

<div id="f1"><div id="outer-element"><img id="inner-element" src="http://zx85.dyndns.org/raphtest/img/title.png" alt="Logo"></div></div>
#fl {
    float: left;
}

#outer-element {
    display: table-cell;
    vertical-align: middle;
    height: 40px;
    max-width: 301px;
}

#inner-element {
    display: inline-block;
    margin-left: -20px;
}

但是,如果没有Bootstraps最新版本(2.3.1),这不起作用!看看这个jsFiddle:http://jsfiddle.net/fmwzT/2/

第二个jsFiddle不包含Boostrap 2.3.1但是DOES包含Boostrap 2.3.0(包含在我称为layout.css的外部css文件中)但它不起作用。

问题:有谁知道Twitter Bootstrap 2.3.1的哪一部分导致导航栏内的图像响应?

1 个答案:

答案 0 :(得分:1)

这在版本2.3.1(responsive-combined.css)中出现,而不是在以前的版本中出现:

img {
    height: auto;
    max-width: 100%;
}