爲什麼輸入和按鈕不是並排？

我想添加輸入框旁邊的按鈕。爲什麼輸入和按鈕不是並排？

<div class="form-group row"> 
           <label for="imageidVal" class="col-md-1 control-label pull-left text-nowrap">Image Id:</label> 
           <div class="col-md-3 "> 
            <input type="text" class="form-control" id="imageidVal" name="imageidVal" readonly="readonly" placeholder="Image Id" value='<jsp:getProperty property="imageID" name="adminObj"/>'> 
           </div> 

           <label for="cntridVal" class="col-md-1 control-label pull-left text-nowrap">Center Id:</label> 
           <div class="col-md-3 "> 
            <input type="text" class="form-control" id="cntridVal" name="cntridVal" placeholder="Center Id" value='<jsp:getProperty property="cntr_id" name="adminObj"/>'> 
            <button type="submit" class="btn btn-primary form-control" data-toggle="modal" data-target="#myModal" id = "searchCntrBtn" name="searchCntrBtn" onclick="getCntrDetails()">...</button> 

    </div>     
</div>

來源

2017-07-24 Ravikanth

我會修復你的格式 - 這個剪切和粘貼的代碼片段很難閱讀。我試着將'form-group'移動到一個父div，並且只讓它自己有'row'類，並且看看它有多遠，就像他們在文檔中獲得的那樣：http://getbootstrap.com/css /＃forms-control-sizes在列大小下。 – kuanb

沒有..拆除後也無法正常工作。給出相同的顯示 – Ravikanth

.form-control強制項目佔用100％的可用寬度。您在<input>和按鈕上都使用此功能。你將不得不重新格式化你的代碼來解決這個問題......通過創建另一個.col的按鈕，或者利用自舉的輸入組分量：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="form-group row"> 
 
\t <label for="imageidVal" class="col-xs-2 control-label pull-left text-nowrap">Image Id:</label> 
 
\t <div class="col-xs-4"> 
 
\t \t <input type="text" class="form-control" id="imageidVal" name="imageidVal" readonly="readonly" placeholder="Image Id" value='<jsp:getProperty property="imageID" name="adminObj"/>'> 
 
\t </div> 
 

 
\t <label for="cntridVal" class="col-xs-2 control-label pull-left text-nowrap">Center Id:</label> 
 
\t <div class="col-xs-4"> 
 
\t \t <div class="input-group"> 
 
\t \t \t <input type="text" class="form-control" id="cntridVal" name="cntridVal" placeholder="Center Id" value='<jsp:getProperty property="cntr_id" name="adminObj"/>'> 
 
\t \t \t <span class="input-group-btn"> 
 
\t \t \t \t <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#myModal" id = "searchCntrBtn" name="searchCntrBtn" onclick="getCntrDetails()">...</button> 
 
\t \t \t </span> 
 
\t \t </div> 
 
\t </div>     
 
</div>

來源

2017-07-24 19:58:35

謝謝，羅伯特。 – Ravikanth

爲什麼輸入和按鈕不是並排？

回答

相關問題