附加的DEMO：好吧，我使用了bootstrap的hidden-xs或visible-lg或visible-sm类进行了尝试，在该类中，很少部分将在小型设备中呈现，而很少部分将在大型设备中呈现，您将了解如何相应地修改您的代码。
您可以添加尽可能多的部分，并根据设备使用隐藏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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句