Bootstrap 4.0 input-group-append и prepend показывают неверную высоту

Question

Я работаю с Bootstrap 4.0 , и у меня возникла проблема, которую я не могу решить.input-group-append и input-group-prepend увеличивают свой размер при уменьшении разрешения.

Я читал документацию input-group, и я делаюне вижу проблем в моем коде

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<hr />
    <div class="row">

        <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4">
            <div class="row">

                <div class="input-group input-group-sm mb-3 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="testPot">Potencia</span>
                    </div>
                    <select class="custom-select custom-select-sm">
                        <option value="value">text</option>
                    </select>
                </div>


                <div class="input-group input-group-sm mb-3 col-xl col-lg col-md col-sm col">
                    <input type="text" class="form-control">
                    <div class="input-group-append">
                        <span class="input-group-text">KVA</span>
                    </div>
                </div>

                <div class="input-group input-group-sm col-xl col-lg col-md col-sm col mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">Y</span>
                    </div>
                    <input type="text" class="form-control" name="name" value="" />
                    <div class="input-group-append">
                        <span class="input-group-text">KVA</span>
                    </div>
                </div>
            </div>
        </div>
    </div>


<hr />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Это ссылка codepen , где я записал GIF, если вам нужно воспроизвести проблему

Я что-то делаюнеправильно или это проблема начальной загрузки?как я могу это исправить?

Спасибо!

Answer 1

Я думаю, что ваша проблема в том, что ширина элементов внутри столбцов не помещается на нем, поэтому они разбиваются на несколько строк.Если вы добавите несколько классов границ, вы заметите это.Посмотрите на следующий пример, где я сократил классы, необходимые для вашего первоначального подхода:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<hr/>

<div class="container-fluid">
<div class="row">

  <div class="col-4">
  <div class="row">

    <div class="input-group input-group-sm mb-3 col-md-6 border border-danger">
      <div class="input-group-prepend">
        <span class="input-group-text" id="testPot">Potencia</span>
      </div>
      <select class="custom-select custom-select-sm form-control">
        <option value="value">text</option>
      </select>
    </div>

    <div class="input-group input-group-sm mb-3 col border border-info">
      <input type="text" class="form-control">
      <div class="input-group-append">
        <span class="input-group-text">KVA</span>
      </div>
    </div>

    <div class="input-group input-group-sm mb-3 col border border-danger">
      <div class="input-group-prepend">
        <span class="input-group-text">Y</span>
      </div>
      <input type="text" class="form-control" name="name" value="" />
      <div class="input-group-append">
        <span class="input-group-text">KVA</span>
      </div>
    </div>

  </div>
  </div>

</div>
</div>

<hr/>

Теперь, поскольку вы оборачиваете все свои входные данные в col-4, а это 1/3 ширины экрана (поскольку в сетке 12 столбцов), яПодумайте, лучшее, что вы можете сделать, это поместить их все в col-12 упаковщики и разделить их на несколько строк, или, в качестве альтернативы, увеличить размер главной оболочки.Проверьте следующие образцы:

Пример 1. Группы входов для упаковщиков col-12

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<hr/>

<div class="container-fluid">
<div class="row">

  <div class="col-4">
  <div class="row">

    <div class="input-group input-group-sm mb-3 col-12 border border-danger">
      <div class="input-group-prepend">
        <span class="input-group-text" id="testPot">Potencia</span>
      </div>
      <select class="custom-select custom-select-sm form-control">
        <option value="value">text</option>
      </select>
    </div>

    <div class="input-group input-group-sm mb-3 col-12 border border-info">
      <input type="text" class="form-control">
      <div class="input-group-append">
        <span class="input-group-text">KVA</span>
      </div>
    </div>

    <div class="input-group input-group-sm mb-3 col-12 border border-danger">
      <div class="input-group-prepend">
        <span class="input-group-text">Y</span>
      </div>
      <input type="text" class="form-control" name="name" value="" />
      <div class="input-group-append">
        <span class="input-group-text">KVA</span>
      </div>
    </div>

  </div>
  </div>

</div>
</div>

<hr/>

Пример 2: увеличить ширину главной обертки

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<hr/>

<div class="container-fluid">
<div class="row">

  <div class="col-8">
  <div class="row">

    <div class="input-group input-group-sm mb-3 col-md-6 border border-danger">
      <div class="input-group-prepend">
        <span class="input-group-text" id="testPot">Potencia</span>
      </div>
      <select class="custom-select custom-select-sm form-control">
        <option value="value">text</option>
      </select>
    </div>

    <div class="input-group input-group-sm mb-3 col border border-info">
      <input type="text" class="form-control">
      <div class="input-group-append">
        <span class="input-group-text">KVA</span>
      </div>
    </div>

    <div class="input-group input-group-sm mb-3 col border border-danger">
      <div class="input-group-prepend">
        <span class="input-group-text">Y</span>
      </div>
      <input type="text" class="form-control" name="name" value="" />
      <div class="input-group-append">
        <span class="input-group-text">KVA</span>
      </div>
    </div>

  </div>
  </div>

</div>
</div>

<hr/>

Answer 2

Попробуйте с этим: HTML:

<div class="search-block" style="display:inline-block;position:relative;">
      <div class="form-input-icon form-input-icon-right">
        <i>KVA</i>
         <input type="text" class="form-control form-control-sm form-control-rounded">
       <button type="button" class="search-block-submit"></button>
    </div>

css:

.form-input-icon > i {
    position: absolute;
    z-index: 1 !important;
    margin: 11px 2px 4px 10px;
    z-index: 3;
    width: auto;
    font-size: 15px;
    text-align: center;
    left: 0;

}

.form-input-icon .form-control {
    padding-left: 34px;
}

.form-input-icon.form-input-icon-right > i {
    left: auto;
    right: 3px;
    margin: 11px 10px 4px 2px;
}

.form-input-icon.form-input-icon-right .form-control {
    padding-left: 16px;
    padding-right: 35px;
}

.search-block {
    position: relative;
}

.search-block .form-input-icon > i {
    margin-top: 5px;
}

.search-block .search-block-submit {
    position: absolute;
    top: -1px;
    right: 0px;
    height: 38px;
    width: 38px;
    background: none;
    border: none;
    z-index: 4;
    cursor: default;
}

рабочий поршень: http://plnkr.co/edit/kllOdHc7SKeyrC9ZMuzT?p=preview