Question

我遇到了bootstrap导航栏的问题。我左边有3个链接，右边有2个链接。我将导航栏的最小屏幕宽度更改为600px以折叠，但问题是在768px之后，链接停止移动/响应屏幕更改，并且在导航栏崩溃之前，右边的两个链接不再可见。我怎样才能解决这个问题？或者我应该在getbootstrap.com/customize/中更改以允许导航栏在768px之后进一步粘在一起。感谢

这是我的导航栏代码

    <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

你可以看到，当我调整屏幕宽度时，登录按钮会被隐藏，我希望它继续向左移动。最终结果是在断点之前，右边的两个按钮现在被隐藏了。当我调整宽度时，如何让它向左移动更多？感谢

Answer 1

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

您要么使用bootstrap Customize来更改

@screen-sm-min和@grid-float-breakpoint变量到您想要的值（在这种情况下为600），

@screen-xs-max和@grid-float-breakpoint-max至yourValue - 1（本例中为599），

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

或者您可以随时使用Bootstrap的Sass / Scss或更少的文件来使用。

Bootstrap导航栏响应

1 个答案: