3

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

1 回答 1

3

你是标记这个的人吗？

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

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

只需在您的输入字段中添加一个 span10 类，它就会是这样的

<input type="text" class="search-query span10" placeholder="Search">
于 2012-08-07T15:17:45.747 回答