Bootstrap 3 - 如何最大化navbar内的输入宽度 [英] Bootstrap 3 - How to maximize input width inside navbar
问题描述
目前我有一个导航栏,如下所示:
http://bootply.com/78239
Right now I have a navigation bar that looks like: http://bootply.com/78239
我想最大化搜索文本输入的宽度,而不创建换行符(即,清除链接将与关于链接紧密相连)。
I want to maximize the width of the "search" text-input, without creating line-breaks (i.e., that the "Clear" link will be tight with the "About" link).
我只有css和网页设计的基本经验。我读了一些关于 overflow:hidden
的技巧,但是我不明白当目标元素右边有更多元素时如何使用它。
I only have basic experience with css and web-design. I read something about "overflow: hidden
" tricks, but I don't understand how to use it when there are more elements to the right of the targeted element.
感谢
编辑:
部分解决方案可以为每种情况设置宽度手动,例如 http://bootply.com/78247 :
A partial solution can be to set the width "manually" for each case, like in http://bootply.com/78247 :
@media (max-width: 767px) {
#searchbar > .navbar-form {
width: 100%;
}
}
@media (min-width: 768px) and (max-width: 991px) {
#searchbar > .navbar-form {
width: 205px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
#searchbar > .navbar-form {
width: 425px;
}
}
@media (min-width: 1200px) {
#searchbar > .navbar-form {
width: 625px;
}
}
但此解决方案在菜单的文本动态(例如,包含你好用户名)。
but this solution will not work when the menu's texts are "dynamic" (for example, contain "Hello username").
我认为这不是一个大问题,如果你假设菜单上的文本有限制,宽度 - 这只是恼人的手动计算/测试这些宽度。
I suppose it is not a big issue if you assume that there is a limit on the menu's texts' widths - it's just annoying to calculate/test those widths manually. I'm just curious to know if there's a neat way to do it automatically.
推荐答案
对于Bootstrap 3.2版本,我只是想知道是否有一个整洁的方法来自动完成。并且还应为 input-group
设置 display:table; ,并将宽度设置为
1%
为 input-group-addon
。
For Bootstrap version 3.2 and up you should also set the display:table;
for the input-group
and set the width to 1%
for the input-group-addon
.
<div style="display:table;" class="input-group">
<span style="width: 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">
</div>
Demo Bootstrap版本3.2+: http://www.bootply.com/t7O3HSGlbc
Demo Bootstrap version 3.2+: http://www.bootply.com/t7O3HSGlbc
-
如果允许更改导航栏元素的位置?我不明白,而不创建换行符(即,清除链接将紧紧与关于链接)。尝试此操作: http://bootply.com/78374 。
If you allow changing the position of your navbar elements? I don't understand "without creating line-breaks (i.e., that the "Clear" link will be tight with the "About" link)." Try this: http://bootply.com/78374.
What i did:
What i did:
- 删除表单左侧的浮动(通过删除导航栏左侧类)
-
- 将窗体组的显示设置为内联(
style =display:inline
) - 更改元素的位置(右浮动优先)
- Drop the float left of the form (by dropping the navbar-left class)
- Give other navbar elements a right float (the navbar-right class)
- Set display of the form-group to inline (
style="display:inline"
) - Change the position of the elements (the right floated first)
相关问题:
- Expand div to max width when float:left is set
html ::
html:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">My Project</a>
</div>
<div class="navbar-collapse collapse" id="searchbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="about.html">About</a></li>
<li id="userPage">
<a href="#@userpage"><i class="icon-user"></i> My Page</a>
</li>
<li><a href="#logout" data-prevent="">Logout</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#" title="Start a new search">Clear</a></li>
</ul>
<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>
</div>
</form>
</div><!--/.nav-collapse -->
</div>
</div>
这篇关于Bootstrap 3 - 如何最大化navbar内的输入宽度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!