Bootstrap CSS Component input frame Group _javascript tips

This example for you to share the bootstrap input frame group of specific code for your reference, the specific contents are as follows

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

Http://www.tuicool.com/articles/VzUVfyi

By adding the contents of the prefix and suffix to the input field, you can add a common element to the user input. For example, you can add a dollar sign, or add a @ to the Twitter username, 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
//elements 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 {
//Set the minimum value so that the table pattern is approximately divided into
 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 icon to display
2. check box and radio box as addon. Input-group-addon (can place Label,icon,checkbox,radio)
3. Button as Addon
4. Drop-down menu button as addon
5. Segmented button as addon

<! DOCTYPE html>  

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.