引导程序在dl-dt中对齐输入字段

时间:2017-11-25 15:52:16

标签: html css twitter-bootstrap

如何水平对齐此输入字段和文本在同一行?

<div class="form-group col-md-12">
    <dl class="row">';
      if($row_list['bestelno'] > 0) { echo '
  <dt class="col-sm-3">Artikel</dt>
  <dd class="col-sm-9">'.$row_list['bestelno'].'</dd>'; }
  echo '

  <dt class="col-sm-3">Omschrijving</dt>
  <dd class="col-sm-9">'.$row_list['omschrijving'].'</dd>

  <dt class="col-sm-3">Nieuw aantal</dt>
  <dd class="col-sm-5">
    <div class="input-group form-group has-success-edit has-feedback" id="div_exp_aantal['.$i.']">
      <input type="number" min="0" class="form-control" id="exp_aantal['.$i.']" name="exp_aantal" placeholder="Huidige aantal" value="'.($row_list['aantal_huidig'] - 1).'" onkeyup="validate_edit(this, '.$i.')" onmousemove="validate_edit(this, '.$i.')"><span class="input-group-addon">'.$row_list['eenheid'].' &nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-ok form-control-feedback" id="exp_aantal_status['.$i.']"></span></span>
    </div>
  </dd>
</dl>
</div>

根据要求添加清洁HTML。 CSS是标准的Bootstrap。

<div class="form-group col-md-12">
                    <dl class="row">

                      <dt class="col-sm-3">Omschrijving</dt>
                      <dd class="col-sm-9">Pallet gebruikt 120x80</dd>

                      <dt class="col-sm-3">Nieuw aantal</dt>
                      <dd class="col-sm-5">
                        <div class="input-group form-group has-success-edit has-feedback" id="div_exp_aantal[2]">
                          <input type="number" min="0" class="form-control" id="exp_aantal[2]" name="exp_aantal" placeholder="Huidige aantal" value="35" onkeyup="validate_edit(this, 2)" onmousemove="validate_edit(this, 2)"><span class="input-group-addon">stuk &nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-ok form-control-feedback" id="exp_aantal_status[2]"></span></span>
                        </div>
                      </dd>
                    </dl>
                </div>

Alessio建议编辑结果

0 个答案:

没有答案