twitter-bootstrap – Bootstrap内联文本框和搜索按钮

前端之家收集整理的这篇文章主要介绍了twitter-bootstrap – Bootstrap内联文本框和搜索按钮前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有搜索输入框,我想要使用bootstrap形式控制外观的bootstrap样式.问题是,我还希望搜索按钮与搜索框在同一行.我认为这可以使用form-inline完成,但是当我将类form-control添加搜索框时,搜索按钮会被推送到下一行:
<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框的样式,同时保持按钮内联?

解决方法

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

猜你在找的Bootstrap相关文章