如何在320 x 480的Bootstrap导航栏中使右对齐的下拉菜单起作用？

debugcn 发表于 Dev

爱德华·唐格（Edward Tanguay）

我必须更改我的Bootstrap导航栏，以便右侧的下拉列表在较小的屏幕上和在较大的屏幕上一样起作用：

完整代码：

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>SHOWCASE: Bootstrap Navbar</title>              
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet"/>     
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>   
        <script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <style type="text/css">
            .pagecontent {
                margin: 0 18px;
            }
            /* bootstrap override */
            .container {
                width: 100%;
                padding: 0;
            }
            .navbar {
                border-radius: 0px;
            }
            .container a {
                color: yellow;
            }
            .navbar-text {
                float: left !important;
                margin-right: 10px;
            }
            .navbar-right {
                float: right!important;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <nav class="navbar navbar-inverse">
                <div class="container-fluid">
                    <div class="navbar-header pull-left">
                        <a class="navbar-brand" href="#">Company Name</a>
                    </div>                
                    <ul class="nav navbar-nav visible-sm-block visible-md-block visible-lg-block">
                        <li class="active"><a href="#">Page 1</a></li>
                        <li><a href="#">Page 2</a></li>
                        <li><a href="#">Page 3</a></li>
                    </ul>                    
                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown pull-right">
                            <a href="#" data-toggle="dropdown" class="dropdown-toggle"><span class="glyphicon glyphicon-menu-hamburger"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Menu 1</a></li>
                                <li><a href="#">Menu 2</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Menu A</a></li>
                                <li><a href="#">Menu B</a></li>
                                <li><a href="#">Menu C</a></li>
                            </ul>                        
                        </li>
                        <li class="dropdown pull-right">
                            <a href="#" data-toggle="dropdown" class="dropdown-toggle"><span class="glyphicon glyphicon-cog"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Settings 1</a></li>
                                <li><a href="#">Settings 2</a></li>
                                <li><a href="#">Settings 3</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Settings A</a></li>
                                <li><a href="#">Settings B</a></li>
                            </ul>
                        </li>
                    </ul>                      
                </div>
            </nav>
            <div class="pagecontent">
                <p class="visible-xs-block">seen on xs screens.</p>
                <p class="visible-sm-block">seen on sm screens.</p>
                <p class="visible-md-block">seen on md screens.</p>
                <p class="visible-lg-block">seen on lg screens.</p>
            </div>
        </div>
    </body>
</html>

Dasith解决方案的问题：

解决方法是简单地添加背景色：

.navbar-nav .open .dropdown-menu {
       background-color: #fff;

Dasith解决方案的问题＃2：

达西思

通过chrome开发工具进行的快速检查使我得以解决此问题：

    @media (max-width: 767px){
    .navbar-nav .open .dropdown-menu {
           border: 1px solid rgba(0,0,0,.15);
           position:absolute;
           box-shadow: 0 6px 12px rgba(0,0,0,.175);
    }
    .navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus, .navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover {
        color: #000;

    }
   }

这是经过调整的版本，具有上述修改，以便更好地了解其效果。

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

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