boostrap-非常好用但是容易让人忽略的地方------input-group-btn

Posted 2020-08-06 Mr石昊

1.正常的使用

    <div class="form-group">
        <div class="input-group">
            <input class="form-control" type="text" placeholder="1000">
            <div class="input-group-addon">人民币</div>
　　　　　</div>
    </div>

效果

2.特殊使用（两个控件合并成一个）

<div class="form-group">
        <div class="input-group">
          　　<div class="input-group-btn">
　　　　　　　　　　<select class="form-control" style="width: 110px;">
　　　　　　　　　　　　<option>http://</option>
　　　　　　　　　　　　<option>https://</option>
　　　　　　　　　　</select>
　　　　　　　　</div>
          　　<input class="form-control" type="email" placeholder="www.baidu.com">
        </div>
  </div>

　效果