我有一个使用Twitter引导程序的导航栏。我希望搜索终端占用未使用宽度的100%。我可以用javascript来解决这个问题,但有没有办法用css或更优雅的方式设置它?
这是我的导航栏代码:
<div class="navbar navbar-fixed-bottom">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">
<a class="brand" href="#">term:</a>
</li>
<!-- <li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li> -->
</ul>
<form class="navbar-search">
<input type="text" class="search-query" placeholder="Search">
</form>
<ul class="nav">
<li><a href="#">Help</a></li>
</ul>
</div>
</div>
以下是相关的CSS:
.navbar-search {
position: relative;
float: left;
margin-top: 6px;
margin-bottom: 100px;
}
.navbar-search .search-query {
height: 30px;
width: 100%;
padding: 4px 9px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 15px;
font-weight: normal;
line-height: 1;
color: #ffffff;
background-color: #626262;
border: 1px solid #151515;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15);
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15);
box-shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15);
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
答案 0 :(得分:3)
你是那个标记出来的人吗?
您使用navbar-fixed-bottom将导航栏定位到底部,然后插入100px底部边距?重点是什么?
如果您只想实现,那么这个。然后你只需要应用你发布的html代码并删除css。
只需在输入字段中添加一个span10类,所以就像这样
<input type="text" class="search-query span10" placeholder="Search">