Bootstrap导航栏响应

debugcn 发表于 Dev

马克·布兰克

我在使用引导导航栏时遇到问题。我左边有3个链接，右边有2个链接。我将导航栏的最小屏幕宽度更改为600px以折叠，但问题出在768px之后，链接停止移动/响应屏幕更改，并且在导航栏折叠之前不再显示右侧的两个链接。我怎样才能解决这个问题？或者，我应该在getbootstrap.com/customize/中进行哪些更改，以使导航栏在768像素后进一步粘在一起。谢谢

这是我的导航栏代码

    <nav class = "navbar navbar-default navbar-fixed-top">
        <div class = "container">
            <div class = "navbar-header">
                <button type = "button" class = "navbar-toggle collapsed" data-toggle = "collapse" data-target = "#navbar" aria-expanded = "false" aria-control = "navbar">
                    <span class = "sr-only">Toggle navigation</span>
                    <span class = "icon-bar"></span>
                    <span class = "icon-bar"></span>
                    <span class = "icon-bar"></span>
                </button>
                <a class = "navbar-brand" href "/">Project Title</a>
            </div>

            <div class = "collapse navbar-collapse" id = "navbar">
                <ul class = "nav navbar-nav">
                    <li><a href = "#">Link 1</a></li>
                    <li><a href = "#">Link 2</a></li>
                    <li><a href = "#">Link 3</a></li>
                </ul>
                <ul class = "nav navbar-nav navbar-right">
                    <li class = "divider-vertical"></li>
                    <li>
                        <p class = "navbar-btn">
                            <a href = "#" class = "btn btn-default">Login</a>
                        </p>
                    </li>
                    <li>
                        <p class = "navbar-btn">
                            <a href = "#" class = "btn btn-default" role = "button" data-toggle = "modal" data-target = "#modal-sign-up" data-backdrop = "static" data-keyboard = "false">Sign up</a>
                        </p>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

我使用了http://getbootstrap.com/customize，并将Media查询断点中的@ screen-sm更改为600px。断点可以正常工作，但导航栏项目无法正常工作。这是图片

http://pasteboard.co/1bvNW8aE.png

如您所见，在我调整屏幕宽度时，登录按钮已隐藏，我希望它继续向左移动。最终结果是在断点之前，右侧的两个按钮现在已隐藏。调整宽度时，如何使它向左移动更多？谢谢

阿尔皮特·戈尔（Arpit Goyal）

感谢您的编辑问题，这就是您想要的http://jsbin.com/nujime/1/

您可以使用bootstrap Customize进行更改

@screen-sm-min并可@grid-float-breakpoint变为所需的值（在这种情况下为600），

@screen-xs-max并（在这种情况下@grid-float-breakpoint-max为yourValue - 1599），

最后@container-sm到yourValue - 40（560或其他）

或者，您始终可以使用Bootstrap的Sass / Scss或更少的文件进行处理。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。