html - 使用 Bootstrap 在导航中放置搜索栏

Question

我正在使用 Bootstrap 创建网站。我有一个标题，其中包含站点 Logo ，然后我想要在容器的右侧有一个搜索栏，在标题中垂直对齐。我的第二个 header 然后将我的链接导航延伸到整个容器。

我在添加搜索栏时遇到问题，我尝试将其添加到 ul 中并向右拉，但它刚好低于我的 Logo 和全宽。

这里是一个bootsnip

http://bootsnipp.com/snippets/d393M

我用于搜索的标记是

<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
                    <span class="input-group-btn">
                        <button class="btn btn-info" type="button">
                            <i class="glyphicon glyphicon-search"></i>
                        </button>
                    </span>
                </div>

Answer 1

您指向 Bootsnip 的链接无效，因此我无法更深入地查看它。

尝试将搜索包装在表单标签内，如下所示(此代码来自 getbootstrap.com):

<form class="navbar-form navbar-right" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>