Bootstrap 3表单填充父
Bootstrap 3表单填充父
提问于 2013-07-29 17:02:35
我试图在Bootstrap 3中写一个导航栏，有一个导航栏和一些品牌和其他东西，其中包括一个搜索表单，我想要搜索表单来填充导航栏中的额外空间，我该怎么办？
<div class="navbar navbar-fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Brand</a>
<form class="navbar-form pull-left">
<input type="search" class="form-control search-box">
<button type="submit" class="btn btn-default glyphicon glyphicon-search"></button>
</form>
<div class="navbar-form btn-group pull-right">
<button type="button" class="btn btn-default">User</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">My Account</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Logout</a></li>
</ul>
</div>
</div>
</div>回答 3
Stack Overflow用户
发布于 2013-07-29 19:03:55
Bootstrap 3改变了很多，你需要指定输入的宽度。你可以试试像这样的..。
<div class="navbar navbar-fixed-top">
<div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
<div class="nav-collapse collapse">
<ul class="nav navbar-nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">User <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form">
<button type="submit" class="btn btn-default glyphicon glyphicon-search"></button>
<input type="search" class="form-control pull-left" style="width:70%;">
</form>
</div><!--/.nav-collapse -->
</div>
</div>Bootply上的演示：http://bootply.com/70142
Stack Overflow用户
发布于 2013-08-22 21:39:39
因为您的菜单固定在顶部，所以您可以使用如下内容：
<form class="navbar-form navbar-left"
style="display:inline;
position:absolute;
margin-right: 140px;">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Search</button>
</span>
</div>
</form>display:inline用于将绝对位置直接放在您的左侧导航条品牌旁边，或者可能是导航条导航条。bootstrap的类窗体控件将使用它的100%宽度来用输入字段填充导航栏的其余部分。因为在表单的右侧有一个下拉列表，所以在右侧定义了一个匹配的边距，所以元素不会重叠。
示例：on plunker
它可以在IE和Chrome上运行，但不幸的是不能在火狐和Safari上运行。欢迎提出解决这个问题的想法。
Stack Overflow用户
发布于 2013-07-29 17:32:03
尝尝这个
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li><a class="brand" href="#">Brand</a></li>
<li><a href="#">Nav 2</a></li>
<li><a href="#">Nav 3</a></li>
</ul>
<form class="navbar-search pull-left">
<input type="text" class="search-query" placeholder="Search">
</form>
<ul class="nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">User <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">My Account</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Logout</a></li>
</ul>
</li>
</ul>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17919875
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号