Html Can';t使搜索框在引导导航栏中居中
我有静态引导导航栏,并试图在其中的搜索框中心。我尝试过的一切都不起作用。要么把它放在导航栏下面,要么根本不放。我现在可以显示它,但它显示在左侧导航栏标题上方,与其他导航栏项目不在同一垂直位置。我试过使用表单、导航栏中心和一个div。它们都不起作用。一定有一些简单的引导类或css我失踪Html Can';t使搜索框在引导导航栏中居中,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我有静态引导导航栏,并试图在其中的搜索框中心。我尝试过的一切都不起作用。要么把它放在导航栏下面,要么根本不放。我现在可以显示它,但它显示在左侧导航栏标题上方,与其他导航栏项目不在同一垂直位置。我试过使用表单、导航栏中心和一个div。它们都不起作用。一定有一些简单的引导类或css我失踪 <nav class="navbar navbar-default "> <div class="navbar-header"> <bu
<nav class="navbar navbar-default ">
<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="index.html"><img src="static/img/CAP-Seal-75x75.png" width=50 height=50 ></a>
<p style="padding-top:25px;width:120%;"></span>CAWG (TRACS) </p>
</div>
<div id="search" class="nav navbar-nav navbar-center">
<form class="nav navbar-nav navbar-center" role="search">
<input type="text" class="search form-control input-sm" placeholder="Search" id="sitesearch">
<button type="submit" class="btn btn-xs"><span class="glyphicon glyphicon-search"></span></button>
</form>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right" style="padding-right:20px;">
<ul class="nav navbar-nav">
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <span class="glyphicon glyphicon-th-list" aria-hidden="true" style="font-size:1.5em;"></span><i class="icon-angle-down"> </i></a>
<ul class="dropdown-menu">
<li><a href="#track_modal_realtime" data-toggle="modal">Real Time Tracking</a></li>
<li><a id="stop_tracking" href="#">Stop Tracking</a></li>
<li><a href="#track_modal_historical" data-toggle="modal">Historical Tracking</a></li>
<li><a href="#send_message_modal" data-toggle="modal">Communications</a></li>
</ul>
</li>
<li>
<a class="navbar-brand" href="#menu-toggle" id="menu-toggle"><span class="glyphicon glyphicon-resize-full" aria-hidden="true" id="sizeIcon" style="font-size:1.5em;"></span></a></li><!---->
<li><a href="#settings_modal" data-toggle="modal"><span class="glyphicon glyphicon-cog" style="font-size:1.5em;" aria-hidden="true"></span></a></li>
</ul>
</div>
</nav>
切换导航
CAWG(TRACS)
-
-
有什么建议吗
谢谢希望我把你的问题读对了。如果是这样的话,您可以一直这样做:
<nav class="navbar navbar-default ">
<div class="row">
<div class="col-sm-4">
<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="index.html"><img src="static/img/CAP-Seal-75x75.png" width=50 height=50 ></a>
<p style="padding-top:25px;width:120%;"></span>CAWG (TRACS) </p>
</div>
</div>
<div class="col-sm-4">
<div id="search" class="nav navbar-nav navbar-center">
<form class="nav navbar-nav navbar-center" role="search">
<div class="input-group">
<input type="text" class="search form-control input-sm" placeholder="Search" id="sitesearch">
<span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-search"></span></span>
</div>
</form>
</div>
</div>
<div class="col-sm-4">
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right" style="padding-right:20px;">
<ul class="nav navbar-nav">
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <span class="glyphicon glyphicon-th-list" aria-hidden="true" style="font-size:1.5em;"></span><i class="icon-angle-down"> </i></a>
<ul class="dropdown-menu">
<li><a href="#track_modal_realtime" data-toggle="modal">Real Time Tracking</a></li>
<li><a id="stop_tracking" href="#">Stop Tracking</a></li>
<li><a href="#track_modal_historical" data-toggle="modal">Historical Tracking</a></li>
<li><a href="#send_message_modal" data-toggle="modal">Communications</a></li>
</ul>
</li>
<li>
<a class="navbar-brand" href="#menu-toggle" id="menu-toggle"><span class="glyphicon glyphicon-resize-full" aria-hidden="true" id="sizeIcon" style="font-size:1.5em;"></span></a></li><!---->
<li><a href="#settings_modal" data-toggle="modal"><span class="glyphicon glyphicon-cog" style="font-size:1.5em;" aria-hidden="true"></span></a></li>
</ul>
</div>
</div>
</div>
</nav>
切换导航
CAWG(TRACS)
-
-
通过使用引导内置cols,您只需将导航拆分为3个部分,就可以轻松地将元素置于中心位置
希望这就是你想要的:)
这里的工作示例-我一直在寻找可能的副本!谢谢,解决了我的问题!没问题!快乐编码:)