html bootstrap - 导航栏响应问题

Question

我正在尝试为我的脚本创建一个新设计，但是我遇到了一个问题。

导航栏在常规计算机尺寸上看起来很正常，但是当我将其作为平板电脑/手机尺寸运行时，该按钮位于导航栏内的链接下方。
http://prntscr.com/61ovfk

所以这里的问题只是当它大约是普通计算机上窗口大小的一半时。当它变小，那就没问题了。

有没有办法解决这个问题？

这是我的代码，

<nav class="navbar navbar-inverse 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-controls="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="#">companyName</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                        <ul class="nav navbar-nav">
                                <li><a href="order.php">Order Services</a></li>
                                <li><a href="announcements.php">Announcements</a></li>
                                <li><a href="knowledgebase.php">Knowledgebase</a></li>
                                <li><a href="support.php">Support</a></li>
                                <li><a href="contact.php">Contact Us</a></li>
                        </ul>
                        <ul class="nav navbar-nav navbar-right">
                                <li>
                                        <p class="navbar-btn">
                                                <a class="btn btn-primary" href="login.php">
                                                        <span class="glyphicon glyphicon-user" aria-hidden="true"></span> Manage Account
                                                </a>
                                        </p>
                                </li>
                        </ul>
                </div><!--/.nav-collapse -->
        </div>
</nav>

谢谢！

Answer 1

您需要自定义 Bootstrap CSS，或使用媒体查询来覆盖导航栏的断点。

@media (max-width: 992px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}

http://bootply.com/dwzfF4CeFd

Answer 2

由于导航栏中的菜单选项太多，当它到达较低的@media 断点时调整大小时，它们会由于其周围的间距有限而折叠。 在媒体查询断点下方为较低的屏幕分辨率编写适当的 css。

/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

我会这样修复它；同时将三个选项转换为 dropdown 以允许我自己在较小的设备上留出更多间距。而这三个菜单选项将在小型设备上隐藏。

Working fiddle

<li class="dropdown visible-sm visible-xs"> <a aria-expanded="false" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <span class="caret"></span></a>

                    <ul role="menu" class="dropdown-menu">
                        <li><a href="#">Action</a>
                        </li>
                        <li><a href="#">Another action</a>
                        </li>
                        <li><a href="#">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li class="dropdown-header">Nav header</li>
                        <li><a href="#">Separated link</a>
                        </li>
                        <li><a href="#">One more separated link</a>
                        </li>
                    </ul>
                </li>
                <li class="hidden-sm hidden-xs"><a href="knowledgebase.php">Knowledgebase</a>

                </li>
                <li class="hidden-sm hidden-xs"><a href="support.php">Support</a>

                </li>
                <li class="hidden-sm hidden-xs"><a href="contact.php">Contact Us</a>

                </li>

更多信息请查看this。 祝你好运！