Bootstrap 输入框组的使用
2018-09-08 19:24 更新
这里请避免使用 <select> 元素，因为 WebKit 浏览器不能完全绘制它的样式。
避免使用 <textarea> 元素，由于它们的 rows 属性在某些情况下不被支持。
将输入框组嵌套到表单组或栅格相关元素的内部。不要将表单组或栅格列（column）类直接和输入框组混合使用。
为 .input-group 赋予.input-group-addon 类
避免使用 <textarea> 元素，由于它们的 rows 属性在某些情况下不被支持。
将输入框组嵌套到表单组或栅格相关元素的内部。不要将表单组或栅格列（column）类直接和输入框组混合使用。
为 .input-group 赋予.input-group-addon 类
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
可以放radio,button等
<div class="row"> <div class="col-lg-6"> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div><!-- /btn-group --> <input type="text" class="form-control" aria-label="..."> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> <div class="col-lg-6"> <div class="input-group"> <input type="text" class="form-control" aria-label="..."> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button> <ul class="dropdown-menu dropdown-menu-right"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div><!-- /btn-group --> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> </div><!-- /.row -->
以上内容是否对您有帮助：
更多建议：