html - 搜索框和提交按钮与/Bootstrap 3 内联

Question

我有一个基于 ColorLib 中的 Gentellela 模板的元素。顶部的搜索栏是内联的和样式化的，但不是表单。当我添加代码以将搜索提交到我的 View 时，提交(“Go”)按钮移动到下一行。

在保持风格的同时实现这一目标的最佳方法是什么？

来自模板的原始代码(无表单标签)。

<div style="padding-top:7px;" class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Search for...">
    <span class="input-group-btn">
      <button class="btn btn-default" type="button">Go!</button>
    </span>
  </div>
</div>

我最近的尝试

<div style="padding-top:7px;" class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
  <form action="" method="post" class="form-inline">
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Search for...">                       
    </div>
       <span class="input-group-btn">
          <button class="btn btn-default" type="submit">Go!</button>
       </span>
    </form>
</div>

一如既往，我感谢所有帮助、建议和评论。

Answer 1

一个好的做法是将输入字段和按钮嵌套在 form-group 中，并使用具有 input-group 类的 div。这是 how input groups are made on Bootstrap .

它应用 display:inline-table 样式来保持内联组件。

<div style="padding-top:7px;" class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
  <form action="" method="post" class="form-inline">
    <div class="form-group">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Search for...">
         <span class="input-group-btn">
            <button class="btn btn-default" type="submit">Go!</button>
         </span>
      </div>
    </div>
  </form>
</div>