Как уменьшить размер input-group-addon Bootstrap

Question

   <div class="time input-group">
          <span class="input-group-addon" id="basic-addon4">Start Time
          </span>
        <timepicker [(ngModel)]="mytime" required></timepicker></div>

Как уменьшить высоту значка ввода-группы-дополнения?Он должен быть равен размеру поля ввода таймера.

Заранее спасибо.

Answer 1

         .input-group.check {
         position: relative;
         padding-left: 125px;
         }
         .input-group-addon.check2 {
         position: absolute;
         top: 59%;
         left: 0;
         transform: translateY(-50%);
         width: 125px !important;
         height: 40px;
         display: block;
         padding-top: 12px;
         }

Я только что изменил приведенный выше код в соответствии с моим требованием, и это помогло.Благодаря.

Answer 2

Проверьте этот фрагмент,

.form-control.timepicker {
  height: 100px; /* Sample height */
}
.input-group {
  position: relative;
  padding-left: 50px;
}
.input-group-addon {
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 50px !important;
  height: 30px;
  display: block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control timepicker" placeholder="Username" aria-describedby="basic-addon1">
</div>