Twitter Bootstrap导航栏

Question

http://www.ontargettdesign.com

您好，

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

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

我怎样才能将它编码为更窄的高度，我觉得我已经尝试了所有东西！

非常感谢任何帮助。

提前致谢

Answer 1

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

将 background-size：contains; 添加到跟随或删除宽度和高度。

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