1

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

4

1 回答 1

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>

另外我认为为什么你的导航栏没有折叠可能是因为你的标志图像的大小。

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

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

于 2013-02-08T10:12:48.157 回答