css - Twitter Bootstrap 导航栏

Question

http://www.ontargettdesign.com

你好，

当网页调整为 ipad 大小时，导航栏和 Logo 出现问题:

[IMG] http://i60.tinypic.com/4r95qo.png[/IMG]

我怎么能把它编码成一个更窄的高度，我觉得我已经尝试了一切!

非常感谢任何帮助。

提前致谢

Answer 1

您的媒体查询正在裁剪图像。这是因为您拥有的 div 小于正在使用的背景图像。 如果您删除“宽度”和“高度”， Logo 将正确显示。查看此内容。缩小浏览器以查看裁剪情况(因为@media)。右键单击 Logo 并“检查元素”。在右侧或底部，它会显示应用于此图像的 css。您可以切换 css 以查看代码如何影响您的图像。

将 background-size:contain; 添加到以下两个或删除宽度和高度。

@media (max-width: 979px) and (min-width: 769px)
.navbar-brand {
    height: 32px;
    width: 132px;
}

&

@media (max-width: 768px)
.navbar-brand {
    height: 32px;
    width: 132px;
}

要更改使导航栏高度在所有媒体宽度上都相同，您仍然需要弄乱媒体宽度。您的标准高度是“height: 76px;”。

第一个 CSS 用于尽可能小的屏幕

@media (max-width: 768px)
.navbar {
   height: 76px; /* add this */
}

这是第二小的屏幕(对于平板电脑)。你不会摆脱 clear:both 将导航发送到第二行

@media (max-width: 979px) and (min-width: 769px)
.navbar-collapse {
   float: none;
   clear: both; /* DELETE THIS */
   height: 100px; /* You can change this to 76px if you want to be consistent */
}