您也可以把按钮作为输入框组的前缀或者后缀元素,这个时候您就不是添加 .input-group-addon class。
您需要使用 class .input-group-btn 来包裹按钮。
这是必需的,因为默认的浏览器样式不会被重写。
下面的实例演示了这点:
为输入框组添加按钮需要额外添加一层嵌套:
<div class="row"> <div class="col-lg-6"> <div class="input-group"> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> <input type="text" class="form-control"> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> <div class="col-lg-6"> <div class="input-group"> <input type="text" class="form-control"> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> </div><!-- /.row -->
上面实例中不是加入 .input-group-addon
,而是添加 .input-group-btn
来包裹按钮元素。因为不同浏览器的默认样式无法被统一的重新赋值,所以才需要这样做。