twitter bootstrap -我如何让导航折叠成预定义的大小为移动设备的小图标

Question

基于我如何让导航折叠成移动设备的小图标?我想让导航栏折叠，但不是970px的大小，而是一个预定义的大小，比如300px。它是可能的，在bootstrap或我必须自己推它?

我的当前代码:

<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，然后从 responsive 部分取消选择你不需要的响应功能。

然后写媒体查询，如果有必要安排的东西。也可以设置最小宽度为一个元素，以阻止它的大小调整。

Answer 2

调整CSS内的媒体查询。找到强制折叠的媒体查询，剪切它并创建自己的查询，尺寸为300px。如:

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