javascript - Twitter Bootstrap——将导航栏搜索设置为 100% 宽度

Question

我有一个使用 Twitter Bootstrap 的导航栏。我希望搜索终端占用 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">