Twitter Bootstrap 导航栏答案

【问题标题】：Twitter Bootstrap Nav barTwitter Bootstrap 导航栏
【发布时间】：2014-12-29 18:19:32
【问题描述】：

http://www.ontargettdesign.com

嗨，

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

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

如何将其编码为更窄的高度，我觉得我已经尝试了所有方法！

非常感谢任何帮助。

提前致谢

【问题讨论】：

您希望标志变小还是不剪掉标志？现在，由于宽度和高度，徽标被剪裁了。您希望徽标按大小显示但不被剪裁吗？

标签： css twitter-bootstrap navigation

【解决方案1】：

您的媒体查询正在剪切图像。这是因为您拥有的 div 小于正在使用的背景图像。 如果您删除“宽度”和高度，徽标将正确显示。查看此内容。缩小浏览器以查看剪裁发生（因为@media）。右键单击徽标和“检查元素”。在右侧或底部，它将显示应用于此图像的 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 */
}

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

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

【讨论】：

嗨，对不起，我没有很好地解释这一点，我对灰色条的高度有疑问，我希望它与在全尺寸浏览器上时的宽度相同。希望这是有道理的，我的错没有解释问题是灰色“横幅”的高度而不是徽标
我留下了我原来的答案，因为在不同的显示器上修复徽标是你应该考虑的。我添加了如何在不同的屏幕宽度上更改导航高度。您仍然需要处理一些格式（添加边距和填充）。
太棒了，感谢您的帮助，很清楚：两者都解决了这个问题。感谢你的帮助。你能告诉我为什么这给了我想要的结果吗？我喜欢尝试去了解哪里出了问题，这样我就可以避免将来犯错。
导航在徽标的右侧浮动。当导航在该宽度处击中徽标时（由于媒体查询），它正在清除浮动和向下移动。删除该代码会使导航栏保持在徽标右侧。