Bootstrap 3 - 如何最大化导航栏中的输入宽度 [英] Bootstrap 3 - How to maximize input width inside navbar
问题描述
现在我有一个如下所示的导航栏:http://bootply.com/78239
我想最大化搜索"文本输入的宽度,而不创建换行符(即清除"链接将与关于"链接紧密相连).
我只有基本的 css 和网页设计经验.我读了一些关于overflow: hidden
"技巧的内容,但我不明白当目标元素右侧有更多元素时如何使用它.
谢谢
<小时>部分解决方案可以是为每种情况手动"设置宽度,例如 http://bootply.com/78247:
@media (max-width: 767px) {#searchbar >.navbar-form {宽度:100%;}}@media (min-width: 768px) 和 (max-width: 991px) {#searchbar >.navbar-form {宽度:205px;}}@media (min-width: 992px) 和 (max-width: 1199px) {#searchbar >.navbar-form {宽度:425px;}}@media(最小宽度:1200px){#searchbar >.navbar-form {宽度:625px;}}
但是当菜单的文本是动态的"(例如,包含Hello username")时,此解决方案将不起作用.
如果您假设菜单文本的宽度有限制,我想这不是什么大问题 - 手动计算/测试这些宽度很烦人.我只是想知道是否有一种巧妙的方法可以自动执行此操作.
对于 Bootstrap 3.2 及更高版本,您还应该为 input-group
设置 display:table;
> 并将 input-group-addon
的宽度设置为 1%
.
<span style="宽度:1%;"class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span><input type="text" autofocus="autofocus" autocomplete="off" placeholder="Search Here" name="search" style="" class="form-control">
演示 Bootstrap 3.2+ 版:http://www.bootply.com/t7O3HSGlbc>
--
是否允许更改导航栏元素的位置?我不明白不创建换行符(即清除"链接将与关于"链接紧密相连).试试这个:http://bootply.com/78374.
我做了什么:
- 将浮动元素放在表单的左侧(通过删除导航栏左侧的类)
- 给其他导航栏元素一个正确的浮动(navbar-right 类)
- 将表单组的显示设置为内联 (
style="display:inline"
) - 改变元素的位置(右边先浮动)
相关问题:
html:
<div class="navbar-collapse collapse" id="searchbar"><ul class="nav navbar-nav navbar-right"><li><a href="about.html">关于</a></li><li id="userPage"><a href="#@userpage"><i class="icon-user"></i>我的页面<li><a href="#logout" data-prevent="">注销</a></li><ul class="nav navbar-nav navbar-right"><li><a href="#" title="开始新搜索">清除</a></li><form class="navbar-form"><div class="form-group" style="display:inline;"><div class="input-group"><span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span><input class="form-control" name="search" placeholder="Search Here" autocomplete="off" autofocus="autofocus" type="text">
</表单></div><!--/.nav-collapse -->