为什么输入和按钮不是并排？

我想添加输入框旁边的按钮。为什么输入和按钮不是并排？

<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

为什么输入和按钮不是并排？

回答

相关问题