Question

我正在尝试将搜索表单内嵌到导航栏中，如下所示：

但我最终得到了这样的导航栏：

我要做的是让绿色搜索栏垂直填充整个导航栏。但是当我添加更多填充时，导航栏也会获得更多填充。我怎么能这样做，以便搜索栏像第一个例子一样填充整个导航栏？

修改

这是带有静态html的Bootply：http://www.bootply.com/6UyH4u0NWy#

Answer 1

如何将.form-search的高度设置为100％？它具有此当前高度的原因是因为其比例取决于其内容（高度：默认为auto）。另请注意，您的html中存在语法错误（在关闭表单标记之前关闭li标记）。

Answer 2

这可能会让您使用.form-control朝正确的方向前进，以设置输入的高度。

/* CSS used here will be applied after bootstrap.css */

/* nav */

.navbar-inverse .navbar-nav li a {
  padding-top: 15px;
  padding-left: 15px;
}
.navbar.navbar-inverse {
  background: white;
  border-bottom: solid 1px #979797;
}
.navbar-inverse .nav > li > a {
  color: #858585;
  font-weight: 500;
  font-size: 13.5px;
}
.navbar-inverse .nav > li > a:hover,
.navbar .nav > li > a:focus {
  color: black;
  -webkit-transition: ease 0.2s;
  transition: ease 0.2s;
}
.navbar-inverse .navbar-collapse {
  border-top: none;
  text-align: center;
  @media (max-width: 767px) {
    background-color: white;
  }
}
.navbar-header h4 {
  padding: 5px 0 0 10px;
}
.navbar-nav li .search-box {
  height: 100%;
  margin-top: none;
  background-color: #38A6A6;
  border: none;
  color: white;
  border-radius: 0;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: none;
}
.navbar-nav li input.search-query {
  height: 100%;
  padding-left: 26px;
}
.navbar-nav li form.form-search {
  height: 100%;
  position: relative;
}
.navbar-nav li form.form-search:before {
  height: 100%;
  display: block;
  width: 14px;
  height: 14px;
  content: "\e003";
  font-family: 'Glyphicons Halflings';
  color: white;
  background-position: -48px 0;
  position: absolute;
  top: 16px;
  left: 8px;
  z-index: 1000;
}
.navbar-nav li .form-control {
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-fixed-top navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <h4>Brand</h4>

    </div>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Link</a>
      </li>
      <li><a href="#">Link</a>
      </li>
      <li><a href="#">Link</a>
      </li>
      <li><a href="#">Link</a>
      </li>
      <li>
        <form class="form-search form-inline">
          <input type="text" class="search-box form-control" placeholder="Recipient's username" aria-describedby="basic-addon2" />
        </form>
      </li>
    </ul>
  </div>
</nav>

垂直搜索表单填充导航栏

2 个答案: