html - 如何在此表单字段的末尾添加一个按钮并保留 Bootstrap 样式

Question

我正在尝试将搜索字形添加到这个居中搜索栏末尾的按钮。

下面是我想要的样式:

<div class="row">
    <div class="col-md-12">
    <div class="jumbotron text-center">
      <h1>Jumbotron with form</h1>
       <form>
         <div class="col-md-6 col-md-offset-3">
            <div class="input-group input-group-lg">
            <input type="text" class="form-control" placeholder="Username">
            <span class="input-group-addon">Search</span>
          </div>
        </div>
      </form>
      <br><br>
    </div>
  </div>
  </div>

但我想要一个按钮 a - 类似于:

<span class="glyphicon glyphicon-search"></span></button>

而不是 <span class="input-group-addon">Search</span> 但是当我这样做时，按钮会移动到下一行并取消我的样式。

Answer 1

使用 Bootstraps 表单内联类和表单结构将解决您的问题。

<div class="row">
    <div class="col-md-12">
        <div class="jumbotron text-center col-md-6 col-md-offset-3">
            <h1>Jumbotron with form</h1>
            <form class="form-inline" role="form">
                <div class="form-group form-group-lg">
                    <input type="text" class="form-control" placeholder="Username">
                </div>
                <div class="form-group form-group-lg">
                    <button type="button" class="btn btn-default btn-lg pull-left">
                        <span class="glyphicon glyphicon-search"></span> Search
                    </button>
                </div>
            </form>
            <br><br>
        </div>
    </div>
</div>