Twitter Bootstrap Nav bar

Question

http://www.ontargettdesign.com

你好

当网页大小调整为 ipad 大小时，我的导航栏和徽标有问题：

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

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

任何帮助将不胜感激。

提前致谢

Answer 1

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

要么添加背景大小：包含; 到以下两个，或删除宽度和高度。

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

&

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

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

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

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

这是第二小的屏幕（用于平板电脑）。你不会摆脱清除：两者都是将导航发送到第二行

@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 */
}