Bootstrap内联文本框和搜索按钮

时间:2014-04-01 20:30:00

标签: twitter-bootstrap ruby-on-rails-4

我有搜索输入框,我希望使用bootstrap表单控件外观设置样式。问题是,我还希望搜索按钮与搜索框在同一行。我认为这可以使用form-inline来完成,但是当我将类表单控件添加到搜索框时,搜索按钮会被推送到下一行:

<div class="input-group" >
    <div class="form-inline">
      <input id="address" type="textbox" placeholder="City or Zipcode" class="form-control" >
      <input class="btn btn-sm btn-primary" type="button" value="Search" id="addressSearch">
    </div>
</div>

http://jsfiddle.net/TLEbG/

如果我从输入文本框中删除class =“form-control”,该按钮将以内联方式显示:

http://jsfiddle.net/ETs9M/

如何保持form-contol框的样式,同时保持按钮内联?

2 个答案:

答案 0 :(得分:13)

尝试使用输入组:http://getbootstrap.com/components/#input-groups这会将按钮放在文本字段旁边并使其成为一个组件

答案 1 :(得分:10)

这个答案来自original poster's comment

<div class="input-group">
  <input id="address" type="text" placeholder="City or Zipcode" class="form-control">
  <span class="input-group-btn">
    <button class="btn btn-default" type="button" id="addressSearch">Search</button>
  </span>
</div>

Bootply:http://www.bootply.com/gVSi912QEI#