Question

基于How do I get the navigation to collapse into the small icon for mobile devices? 我想让导航崩溃，但不是在970px大小，而是在预定义的大小 - 让我们说300px。它是否可能在引导程序中或我是否必须自己调整它？

我目前的代码：

<div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <button type="button" class="btn btn-navbar" data-toggle="collapse"
                    data-target=".nav-collapse">
                    <span class="icon-bar"></span> <span class="icon-bar"></span> <span
                        class="icon-bar"></span>
                </button>
                <a class="brand" href="/">name</a>
                <div class="nav-collapse collapse">
                    <ul class="nav">
                        <li><a href="#about">About</a></li>
                        <li><a href="#price">Price</a></li>
                    </ul>
                </div>
                <!--/.nav-collapse -->
            </div>
        </div>
    </div>

Answer 1

你可以去http://twitter.github.com/bootstrap/customize.html自定义bootstrap，然后从自适应部分取消选择你不需要的响应功能。

如果有必要，可以编写媒体查询来安排内容。还可以将min-width设置为元素以阻止其调整大小。

Answer 2

调整CSS中的媒体查询。找到强制折叠的媒体查询，将其剪切并使用300px创建自己的查询。喜欢：

@media (max-width: 300px) {
.nav-collapse {
-webkit-transform: translate3d(0, 0, 0);
}

如何将预定义大小的导航折叠到移动设备的小图标中？

2 个答案: