Question

当前，我正在使用Bootstrap4。但是，我遇到了以下问题：

我希望前两个输入组看起来像是底部的一组，唯一的不同是我想将“％”按钮对准输入的右侧。

这是我的代码：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<div class="color" style="background:rgba(255,165,0, 0.2);margin: 0px 1px 20px 1px;">
  <div class="row">
    <div class="form-group form-inline">
      <div class="col-xs-4 pull-right" style="margin: 10px 0;">
        <label class="control-label" for="nuevoDescuentoVenta" style="margin-right:10px;">Descuento</label>
        <div class="input-group">
          <input style="width:80%;" type="number" class="form-control" id="nuevoDescuentoVenta" name="nuevoDescuentoVenta" min="0" placeholder="0">
          <span class="input-group-btn"><button type="button" class="btn btn-primary"><i class="fa fa-percent"></i></button></span>
          <input type="hidden" name="nuevoPrecioDescuento" id="nuevoPrecioDescuento">
        </div>
      </div>
    </div>
  </div>
  <div class="row form-horizontal">
    <div class="form-group">
      <div class="col-xs-4 pull-right">
        <label class="control-label" for="nuevoRecargoVenta" style="margin-right:10px;">Recargo</label>
        <div class="input-group">
          <input style="width:80%;" type="number" class="form-control" id="nuevoRecargoVenta" name="nuevoRecargoVenta" min="0" placeholder="0">
          <span class="input-group-btn"><button type="button" class="btn btn-primary"><i class="fa fa-percent"></i></button></span>
          <input type="hidden" name="nuevoPrecioRecargo" id="nuevoPrecioRecargo">
        </div>
      </div>
    </div>
  </div>
  <hr style="border: 1px solid #C0C0C0;">
  <div class="row form-horizontal">
    <div class="form-group">
      <div class="col-xs-4 pull-right" style="margin: 10px 0;">
        <label class="control-label" for="nuevoTotalVenta" style="margin-right:10px;">Total</label>
        <div class="input-group">
          <span class="input-group-btn"><button type="button" class="btn btn-primary"><b>Q </b></button></span>
          <input style="font-weight:bold;width:80%;" type="number" class="form-control" total="" totalConDescuento="" totalConRecargo="" id="nuevoTotalVenta" name="nuevoTotalVenta" min="0" placeholder="0.00" readonly>
          <input type="hidden" name="nuevoSubtotal" id="nuevoSubtotal">
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

.form-control-label {
    padding-left: 0px;
}

.form-control-static {
    min-height: 39px;
}


.form-input-icon {
    position: relative;
}

.form-input-icon > i {
    position: absolute;
    z-index: 1 !important;
    margin: 11px 2px 4px 10px;
    z-index: 3;
    width: 16px;
    font-size: 16px;
    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: 34px;
}

.search-block {
    position: relative;
}

.search-block .form-input-icon > i {
    margin-top: 9px;
}

.search-block .search-block-submit {
    position: absolute;
    top: -1px;
    right: 0px;
    height: 38px;
    width: 38px;
    background: none;
    border: none;
    z-index: 4;
    cursor: pointer;
}

.search-block .search-block-submit:focus, .search-block .search-block-submit:active {
    outline: none !important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet" type="text/css" />

<div class="search-block" style="display:inline-block;position:relative;">
  <div class="form-input-icon form-input-icon-right">
    <i class="fa fa-percent"></i>
    <input type="number" class="form-control form-control-sm form-control-rounded" placeholder="0" >
    <button type="button" class="search-block-submit"></button>
  </div>
</div>

朋克：http://plnkr.co/edit/xdKDNKrawWxqoQmAk29U?p=preview

输入组中的按钮掉到一边了吗？

1 个答案: