随附演示：我试过使用bootstrap的hidden-xs或visible-lg或visible-sm类，其中一些部分将在小设备中呈现，一些将在大设备中呈现，你将知道如何相应地修改你的代码。
您可以添加尽可能多的部分，并显示他们根据设备使用类为hidden-xs或visible-lg或visible-sm，以及检查出更多的引导程序官方网站。

<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>