Question

我在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

Answer 1

我认为这里有很多问题。

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

查看此页面：http://twitter.github.com/bootstrap/examples/hero.html

它会准确显示响应性所需的文件和HTML。

在你上面的css中，你的身体标签上有一个设置的宽度以及填充，边距等。这对于引导页面似乎是正常的事情，我猜这会导致问题。< / p>

我不是百分之百确定它是否有帮助但是尝试将它们在按钮元素上的数据属性添加到您的btn-navbar

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

此外，我认为为什么导航栏没有折叠可能是因为徽标图片的大小。

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

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

在twitter bootstrap导航栏中添加徽标

这是我的CSS

1 个答案: