Question

我一直在寻找并尝试使用bootstrap导航栏，但一直无法获得我想要的东西。

在大屏幕上，我可以创建一个包含大量内容的漂亮导航栏。在中等屏幕上，我希望该内容的一部分折叠成一般菜单＆＃34;其余的几乎没有变化。在一个小屏幕上，我希望其余部分折叠成另一个汉堡包或搜索图标，这样我在顶部栏中留下了两个可折叠的菜单。我试图使用图像进行模拟。

Navbar on large display

Navbar on small display

如果小屏幕上的菜单分别从左边开始，从右边开始设置，覆盖屏幕宽度的70％，而不是从顶部覆盖100％宽度的动画，那就更好了。

Answer 1

DEMO附件：我尝试使用hidden-xs或者visible-lg或者可见的sm类引导程序，其中几个部分将在小型设备中呈现，很少会在大型设备中呈现，你会对它有所了解如何相应地修改代码。

你可以添加尽可能多的部分，并根据设备使用class-hidden-xs或visible-lg或visible-sm显示它们以及在bootstrap官方网站上查看更多内容。

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 <div class="navbar navbar-default">
        <div class="container-fluid  bg-info">
            <div class="navbar-header">
                <!--Visible on mobile device only-->
                <a class="navbar-brand bg-info visible-xs pull-right" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" title="App Setting">
                    <span class="glyphicon glyphicon-align-justify" style="cursor:default"></span>
                </a>

                <!--Visible on mobile device only-->
              
                    <a class="visible-xs btn navbar-brand pull-right" data-toggle="modal" href="#searchModal">
                        <span class="glyphicon glyphicon-search"></span>
                    </a>
             

                <a class="navbar-brand bg-success"  style="padding-right:5px;padding-left:2px;">
                    <span class="glyphicon glyphicon-home"></span> APP Name
                </a>

      
                 
                


              

                <!--Hidden on mobile device only-->
                    <form action = "" method="get" role="search" class="hidden-xs navbar-form navbar-left">
                        <div class="input-group">
                            <input type = "search" class="form-control" name="id" placeholder="Search..">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
                            </span>
                        </div><!-- /input-group -->
                    </form>

              
            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                <ul class="nav navbar-nav navbar-right">
                   
                        <li class="dropdown">
                            <a href = "#" class="dropdown-toggle" data-toggle="dropdown">
                                <span class="glyphicon glyphicon-user"></span>
                                Name<span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu" role="menu">
                                <li>
                                    <a href = "" >
                                        <span class="glyphicon glyAP glyphicon-log-out"></span> Sign out
                                    </a>
                                </li>
                                <li>
                                    <a href = "" ><span class="glyphicon glyphicon-wrench"></span> Change Password</a>
                                    </li>
                            </ul>
                        </li>
                  
                    <li class="dropdown">
                        <a href = "#" class="dropdown-toggle" data-toggle="dropdown">
                            <span class="glyphicon glyphicon-cog"></span>
                            <!--Visible on mobile device only-->
                            <span class="visible-xs-inline-block">Tools</span>
                        </a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href = ""><span class="glyphicon glyphicon-stats"></span> kkk</a></li>
                            <li><a href = "" target="trace"><span class="glyphicon glyphicon-record"></span> dffd</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>


    <!--Visible on mobile device only-->
    <div class="modal fade" id="searchModal" tabindex="-1" role="dialog" aria-hidden="true">
        <form action = "" method="get" role="search">
            <div class="iput-group input-group-lg" style="margin-top:20px;margin-left:10px;margin-right:10px;">
                <input type = "search" class="form-control" name="id" placeholder="Search.....">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
                </span>
            </div><!-- /input-group -->
        </form>
    </div>

Bootstrap导航栏折叠成2个汉堡包菜单

1 个答案: