Question

我有一个基于ColorLib的Gentellela模板的项目。顶部的搜索栏是内联和样式，但不是表单。当我添加代码以将搜索提交到我的视图时，提交（“开始”）按钮移动到下一行。

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

来自模板的原始代码（无格式代码）。

<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>

带有Bootstrap3的搜索框和提交按钮

1 个答案: