Bootstrap：使扩展的输入字段重叠菜单项

Question

我在我的Bootstrap .navbar中添加了一个扩展输入字段，只有在点击搜索按钮后才会显示。现在，扩展的输入字段将菜单项推向左侧。当#search-form绝对定位时，输入字段会突破容器的右侧。

如何让搜索表单重叠菜单时间到左边？

示例：

＆＃13;

＆＃13;

$(function() {
  $("#search-button, #search-icon").click(function(e) {
    e.preventDefault();

    $("#search-button, #search-form").toggle();
  });
});

＆＃13;

#search-form {
  display: none;
  max-width: 300px;
}

＆＃13;

<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<nav class="navbar navbar-default">
  <div class="navbar-inner">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">Brand</a>
      </div>
      <div class="collapse navbar-collapse" id="navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
          <li>
            <a href="#">This</a>
          </li>
          <li>
            <a href="#">and</a>
          </li>
          <li>
            <a href="#">That</a>
          </li>
          <li>
            <a id="search-button" class="btn btn-link"><i class="glyphicon glyphicon-search"></i></a>
          </li>
          <li>
            <div id="search-form" class="form-group has-feedback">
              <div class="input-group">
                <label class="control-label sr-only" for="search"></label>
                <input type="text" class="form-control" id="search">
                <span class="input-group-btn">
                  <button class="btn btn-default" type="button">Search</button>
                </span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>

＆＃13;

＆＃13;

＆＃13;

修改

添加了截图

Answer 1

这完成了这项工作：

.nav>li:last-child {
    position: absolute;
    right: 15px;
}