Twitter Bootstrap - 将导航栏搜索设置为100％宽度

Question

我有一个使用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;
}

Answer 1

你是那个标记出来的人吗？

您使用navbar-fixed-bottom将导航栏定位到底部，然后插入100px底部边距？重点是什么？

如果您只想实现，那么这个。然后你只需要应用你发布的html代码并删除css。

只需在输入字段中添加一个span10类，所以就像这样

<input type="text" class="search-query span10" placeholder="Search">