读源码:bootstrap的inputGroup

flex-examples

image

  .box {
    display: flex;
    align-items: center;
  }

image

  .box {
    display: flex;
    justify-content: center;
    align-items: center;
  }

bootstrap4的inputGroup

  

    

      @
    
    
    

      .00
    
  

  /*_variables.scss*/
  // $input-border-width = $input-btn-border-width =  $border-width = 1px
  // input-height-border = $input-border-width * 2
  $border-width:                1px !default;
  $input-btn-border-width:      $border-width !default;
  $input-border-width:                    $input-btn-border-width !default;
  $input-height-border:                   $input-border-width * 2 !default;
  //$input-line-height = $input-btn-line-height = $line-height-base = 1.5
  $line-height-base:            1.5 !default;
  $input-btn-line-height:       $line-height-base !default;
  $input-line-height:                     $input-btn-line-height !default;
  $font-size-base:              1rem !default; // Assumes the browser default, typically `16px`
  $input-btn-padding-y:         .375rem !default;
  $input-btn-padding-x:         .75rem !default;
  $input-height-inner:                    ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default;
  $input-height:                          calc(#{$input-height-inner} + #{$input-height-border}) !default;
  /*_forms.scss*/
  .form-control {
    display: block;
    width: 100%;
    height: $input-height;
    padding: $input-padding-y $input-padding-x;
    font-size: $font-size-base;
    line-height: $input-line-height;
    color: $input-color;
    background-color: $input-bg;
    background-clip: padding-box;
    border: $input-border-width solid $input-border-color;
  }
  /*_input-group.scss*/
  .input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap; // For form validation feedback
    align-items: stretch;
    width: 100%;
    > .form-control{
      position: relative; // For focus state's z-index
      flex: 1 1 auto;
      // Add width 1% and flex-basis auto to ensure that button will not wrap out
      // the column. Applies to IE Edge+ and Firefox. Chrome does not require this.
      width: 1%;
      margin-bottom: 0;
    }
  }
  .input-group-prepend,
  .input-group-append {
    display: flex;
    .input-group-text + .input-group-text{
      margin-left: -$input-border-width;
    }
  }
  .input-group-prepend { margin-right: -$input-border-width; }
  .input-group-append { margin-left: -$input-border-width; }
  .input-group-text {
    display: flex;
    align-items: center;
    padding: $input-padding-y $input-padding-x;
    margin-bottom: 0; // Allow use of  elements by overriding our default margin-bottom
    font-size: $font-size-base; // Match inputs
    font-weight: $font-weight-normal;
    line-height: $input-line-height;
    color: $input-group-addon-color;
    text-align: center;
    white-space: nowrap;
    background-color: $input-group-addon-bg;
    border: $input-border-width solid $input-group-addon-border-color;
    @include border-radius($input-border-radius);

    // Nuke default margins from checkboxes and radios to vertically center within.
    input[type="radio"],
    input[type="checkbox"] {
      margin-top: 0;
    }
  }

bootstrap3的inputGroup

  $
  
  .00

  /*variables.less*/
  @padding-base-vertical:     6px;
  @padding-base-horizontal:   12px;
  @font-size-base:          14px;
  @line-height-base:        1.428571429; // 20/14
  @line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px
  @input-height-base:              (@line-height-computed + (@padding-base-vertical * 2) + 2);
//** Large `.form-control` height
  /*input-groups.less*/
  .input-group {
    position: relative; // For dropdowns
    display: table;
    border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
    .form-control {
        // Ensure that the input is always above the *appended* addon button for
        // proper border colors.
        position: relative;
        z-index: 2;

        // IE9 fubars the placeholder attribute in text inputs and the arrows on
        // select elements in input groups. To fix it, we float the input. Details:
        // https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855
        float: left;

        width: 100%;
        margin-bottom: 0;
      }
  }
  .input-group-addon,
  .input-group .form-control {
    display: table-cell;

    &:not(:first-child):not(:last-child) {
      border-radius: 0;
    }
  }
  .input-group-addon{
    width: 1%;
    white-space: nowrap;
    vertical-align: middle; // Match the inputs
  }
  .input-group-addon {
    padding: @padding-base-vertical @padding-base-horizontal;
    font-size: @font-size-base;
    font-weight: normal;
    line-height: 1;
    color: @input-color;
    text-align: center;
    background-color: @input-group-addon-bg;
    border: 1px solid @input-group-addon-border-color;
    border-radius: @input-border-radius;
    // Nuke default margins from checkboxes and radios to vertically center within.
    input[type="radio"],
    input[type="checkbox"] {
      margin-top: 0;
    }
  }
  /*forms.less*/
  .form-control {
    display: block;
    width: 100%;
    height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
    padding: @padding-base-vertical @padding-base-horizontal;
    font-size: @font-size-base;
    line-height: @line-height-base;
    color: @input-color;
    background-color: @input-bg;
    background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
    border: 1px solid @input-border;
    border-radius: @input-border-radius; // Note: This has no effect on s in some browsers, due to the limited stylability of s in CSS.
    .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
    .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
  }

solved-by-flexbox的input-add-on

  …
  
  …

  .InputAddOn {
    display: flex;
    margin-bottom: 1.5em;
  }
  .InputAddOn-field {
    flex: 1;
  }
  .InputAddOn-item {
    background-color: rgba(147, 128, 108, 0.1);
    color: #666666;
    font: inherit;
    font-weight: normal;
  }
  .InputAddOn-field,
  .InputAddOn-item {
    border: 1px solid rgba(147, 128, 108, 0.25);
    padding: 0.5em 0.75em;
  }

refer to

• bootstrap3
  doc
  input-groups.less
  variables.less
  forms.less
• bootstrap4
  doc
  _input-group.scss
  _variables.scss
  _forms.scss
• Flex 布局教程
  语法篇
  实例篇
• solved-by-flexbox
  demo
  input-add-on.css