引導對齊輸入字段在dl - dt

如何水平對齊，使輸入字段和文本位於同一行中？引導對齊輸入字段在dl - dt

<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>

編輯通過阿萊西奧認爲導致

來源

2017-11-25 Muiter

你可以請發佈乾淨的HTML代碼，沒有PHP和你的CSS？ – Alessio

補充，css是標準Bootstrap。 – Muiter

我認爲你會以錯誤的方式，語義上明智的，用dl/dt/dd從這裏開始。在dl中不存在個別dt/dd的分組元素只會增加問題。選擇一個HTML結構_does_允許你正確地分組他們將是我的建議。 – CBroe

如果你想的Nieuw aantal對準，你能給：

添加到.COL-SM-3類「輸入對齊」：

HTML

<dt class="col-sm-3 input-aligned">Nieuw aantal</dt>

CSS：

.input-aligned { 
    line-height:34px; 
}

它總是更好的添加自定義類你的HTML，因爲你是壓倒一切的風格是從引導過來。

Updated codepen here。

來源

2017-11-25 15:59:23 Alessio

請參閱我的帖子更新並提供您的建議更改。 – Muiter

下面是改變後的codepen我建議你：https://codepen.io/alezuc/pen/OOwyda – Alessio

除了CSS，你還有什麼改變？ – Muiter

引導對齊輸入字段在dl - dt

回答

相關問題