BOOTSTRAP--CSS component--Input frame Group (Input-group)

Learn why the Table-cell table width is set to 1%.

Http://www.tuicool.com/articles/VzUVfyi
By adding the prefix and suffix to the input field, you can add common elements to the user input. For example, you can add a dollar sign, or add a @ before the Twitter user name, or other common elements required by the application interface.

Input-group (INPUT-GROUP-XS,INPUT-GROUP-SM,INPUT-GROUP-LG), Input-group-addon, Form-control

SOURCE
//Each element is set to equal height display, input-group input box group Display:table,input-group-addon and Form-control set Display:table-cell
. Input-group {
  position:relative;
  display:table;
  border-collapse:separate;
}
Input-group If the col style is applied at the same time, the float and left and right padding are canceled
. input-group[class*= "col-"] {
  float:none;
  padding-right:0;
  padding-left:0;
}
. Input-group. Form-control {
  position:relative;
  Z-index:2;
  Float:left;
  width:100%;
  margin-bottom:0;
}
. Input-group-addon,
. input-group-btn {
//sets the minimum value so that the tabular pattern is approximated to
  width:1%;
  White-space:nowrap;
  Vertical-align:middle;
}
. Input-group-addon,
. input-group-btn,
. Input-group. form-control {
  Display:table-cell;
}

1. Basic usage
Sometimes you need to combine text input boxes (input-group) with text or small icons to display the
2. check box and radio box as addon. Input-group-addon (You can place Label,icon, Checkbox,radio)
3. Button as addon
4. Drop-down menu button as Addon
5. Segment button as addon

<! DOCTYPE html>