在 twitter 引导导航栏中添加徽标答案

【问题标题】：Adding logo in twitter bootstrap nav bar在 twitter 引导导航栏中添加徽标
【发布时间】：2013-02-07 21:06:37
【问题描述】：

我在 twitter bootstrap 中创建了一个基本的导航栏。我把标志放在上面。但问题是，当我调整窗口大小时，它失去了响应能力，我的意思是导航折叠不起作用

这是我的导航栏的代码

<nav>
    <div class="navbar navbar-top">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar">
                    <span class="icon-th-list"></span>
                </a>
                <a href="#" class="brand"> aniya</a>
                <div class="nav-collapse collapse">
                    <ul class="nav pull-right">
                        <li><a href="#">about us</a></li>
                        <li><a href="#">contact us</a></li>
                        <li><a href="#">Blog</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</nav> <!----nav--->

这是我的 CSS

body {
    position: relative; width: 960px; padding: 30px; margin: 30px auto 5px; background: white; -moz-box-shadow: 0 0 20px black;
}

    .navbar .navbar-inner {
        height: 120px;
        width: auto;
    }


    .navbar .navbar-inner .container .brand {
        background-image: url(img/sample%20logo.jpg);
        width:500px;
        height:100px;
        background-repeat: no-repeat;

        text-indent:-9999px;
    }

这是我做的

http://i47.tinypic.com/2uo5g76.jpg

【问题讨论】：

标签： twitter-bootstrap navigation

【解决方案1】：

我认为这里有很多问题。

首先，我假设您肯定将所有响应式 Bootstrap css 等加载到您的页面上？

看这个页面：http://twitter.github.com/bootstrap/examples/hero.html

它将准确地向您显示响应所需的文件和 html。

在上面的 CSS 中，您的 body 标签上设置了一个宽度以及填充、边距等。这似乎不是引导页面的正常操作，我猜这会导致问题。

我不能 100% 确定这是否会有所帮助，但请尝试将按钮元素上的数据属性添加到您的 btn-navbar 上

<a class="btn btn-navbar">
 <span class="icon-th-list"></span>
</a>

另外，我认为您的导航栏没有折叠的原因可能是您的徽标图像的大小。

您可能需要编写一些媒体查询来处理这个问题 - 可能会为较低的分辨率提供较小的图像。

我希望我在这里所说的一些内容可以帮助你，或者至少让你走上正确的道路。

【讨论】：