如何在此表单字段的末尾添加一个Button并保留Bootstap样式

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>

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

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

而不是 <span class="input-group-addon">Search</span> 但是当我这样做时，按钮移动到下一行并抛出我的造型 - 我是新手，所以会很感激帮助。

感谢

Answer 1

使用Bootstraps form-inline类和表单结构将解决您的问题。

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

Answer 2

试试这个：

DEMO

    <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 style="padding:5px 0px 5px 0px !important" class="input-group-addon"><button class="btn"><span class="glyphicon glyphicon-search"></span>&nbsp;Search</button></span>
                    </div>
                </div>
            </form>
            <br>
            <br>
        </div>
    </div>
</div>