Question

我是bootstrap.i中的新手，使用bootstrap设计以下html表单。这是下面给出的图像：

如您所见，右侧[红色标记]大小不相同。我知道手动调整每个元素的宽度。但它非常繁琐。可能是form-control导致此问题。请帮助我。谢谢

这是代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Employee Loan Distribution</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="js/jquery-2.1.4.min.js"></script>
  <script src="js/bootstrap.min.js"></script>

  <link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css">  
  <script src="js/moment.min.js"></script> <!-- bootstrap-datetimepicker requires Moment.js to be loaded first -->
  <script src="js/bootstrap-datetimepicker.min.js"></script>

 <script type="text/javascript">
        $(function () {
            $('#datetimepicker1').datetimepicker({format:"DD/MM/YYYY", useCurrent: false });
        });         
 </script>

<style>
#datetimepicker1{
  width:140px;
}

 body {
  background-color: #584F39;
}
.panel.panel-primary {
  border-color: #73AD21;
}
.panel-group .panel .panel-heading {
  background: #73AD21;
}
.form-horizontal .panel.panel-primary {
  border-color: #73AD21;
  margin-bottom: 10px;
}
@media (max-width: 767px) {
  .form-group-top {
    margin-top: 15px;
  }
}
</style>


</head>
<body >

<div class="container"  >  
    <div class="panel-group">
        <div class="panel panel-primary"  >
            <div class="panel-heading" >
                <h3 class="panel-title" style="text-align: center;">Employee Loan Distribution</h3>         
            </div>

            <div class="panel-body">

                <form class="form-horizontal" >

                        <div class="form-group">
                         <label class="control-label col-sm-3"  for="acode">Employee ID:</label>
                         <div class="col-sm-3" id = "empid" >
                             <div class="input-group">                      
                           <span class="input-group-addon"><i class="glyphicon glyphicon-user"  aria-hidden="true"></i></span>
                           <input type="text" class="form-control" id="employeeid"  placeholder="Enter ID">                        
                         </div>
                         </div>
                        </div>              

                        <div class="form-group">
                            <label class="control-label col-sm-3" style="text-align:right;" >Loan Name:</label>
                            <div class="col-sm-8">
                                <div class="input-group">                                 
                                  <select  class="form-control " name="month" id="month" onchange="" >
                                        <option value="" disabled selected>Loan</option>
                                        <option value="01">Bank Consumer Loan</option>
                                        <option value="02">GPF Loan Adv.</option>
                                        <option value="03">Green Super Market Loan</option>                                     
                                        <option value="05">House Building Loan</option>                                     
                                        <option value="19">Other Loan</option>
                                    </select>     
                                </div>
                            </div>      
                        </div>  

                        <div class="form-group">
                         <label class="control-label col-sm-3"  for="dcode">Description:</label>
                         <div class="col-sm-8">
                             <div class="input-group">                                             
                               <input type="text" class="form-control" id="dcode"  placeholder="Enter Loan Description">               
                             </div>
                         </div>
                        </div>  

                        <div class="form-group">
                            <label class="control-label col-sm-3" style="text-align:right;">Amount:</label>
                            <div class="col-sm-8">
                                <div class="input-group">                                 
                                  <input type="text" class="form-control" placeholder="Enter Amount" >        
                                </div>
                            </div>      
                        </div>  

                        <div class="form-group">
                           <label class="control-label col-sm-3" style="text-align:right;" >Sanction Date:</label>
                           <div class="col-sm-3">
                               <div class="input-group date">
                                   <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar"></span>
                                    </span> 
                                   <input type="text"  id='datetimepicker1' class="form-control" placeholder="DD/MM/YYYY">     
                               </div>
                           </div>
                       </div>

                       <div class="form-group">
                            <label class="control-label col-sm-3" style="text-align:right;">Interest Rate:</label>
                            <div class="col-sm-8">
                                <div class="input-group">                                 
                                  <input type="text" class="form-control" placeholder="Enter Rate" >          
                                </div>
                            </div>      
                        </div>  

                        <div class="form-group">        
                          <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-primary">Save</button>
                            <button type="button" class="btn btn-success">Edit</button>
                            <button type="button" class="btn btn-danger">Delete</button>
                            <button type="button" class="btn btn-info">Exit</button> 
                          </div>
                        </div>
                </form>
            </div>
        </div> 
    </div>    
</div>

</body>
</html>

Answer 1

创建一个这样的自定义类：

.custom
{
    min-width: 150px;
}

将此类添加到所有表单元素。

Answer 2

删除输入组类，不使用插件按钮

<div class="container"  >  
    <div class="panel-group">
        <div class="panel panel-primary"  >
            <div class="panel-heading" >
                <h3 class="panel-title" style="text-align: center;">Employee Loan Distribution</h3>         
            </div>

            <div class="panel-body">

                <form class="form-horizontal" >

                        <div class="form-group">
                         <label class="control-label col-sm-3"  for="acode">Employee ID:</label>
                         <div class="col-sm-9" id = "empid" >
                             <div class="input-group">                      
                           <span class="input-group-addon"><i class="glyphicon glyphicon-user"  aria-hidden="true"></i></span>
                           <input type="text" class="form-control" id="employeeid"  placeholder="Enter ID">                        
                         </div>
                         </div>
                        </div>              

                        <div class="form-group">
                            <label class="control-label col-sm-3" style="text-align:right;" >Loan Name:</label>
                            <div class="col-sm-9">


                                <select  class="form-control " name="month" id="month" onchange="" >
                                        <option value="" disabled selected>Loan</option>
                                        <option value="01">Bank Consumer Loan</option>
                                        <option value="02">GPF Loan Adv.</option>
                                        <option value="03">Green Super Market Loan</option>                                     
                                        <option value="05">House Building Loan</option>                                     
                                        <option value="19">Other Loan</option>
                                    </select>     
                                </div>
                            </div>      


                        <div class="form-group">
                         <label class="control-label col-sm-3"  for="dcode">Description:</label>
                         <div class="col-sm-9">

                               <input type="text" class="form-control" id="dcode"  placeholder="Enter Loan Description">               

                         </div>
                        </div>  

                        <div class="form-group">
                            <label class="control-label col-sm-3" style="text-align:right;">Amount:</label>
                            <div class="col-sm-9">

                                  <input type="text" class="form-control" placeholder="Enter Amount" >        
                                </div>
                            </div>      


                        <div class="form-group">
                           <label class="control-label col-sm-3" style="text-align:right;" >Sanction Date:</label>
                           <div class="col-sm-9">
                               <div class="input-group date">
                                   <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar"></span>
                                    </span> 
                                   <input type="text"  id='datetimepicker1' class="form-control" placeholder="DD/MM/YYYY">     
                               </div>
                           </div>
                       </div>

                       <div class="form-group">
                            <label class="control-label col-sm-3" style="text-align:right;">Interest Rate:</label>
                            <div class="col-sm-9">

                                  <input type="text" class="form-control" placeholder="Enter Rate" >          
                                </div>

                        </div>  

                        <div class="form-group">        
                          <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-primary">Save</button>
                            <button type="button" class="btn btn-success">Edit</button>
                            <button type="button" class="btn btn-danger">Delete</button>
                            <button type="button" class="btn btn-info">Exit</button> 
                          </div>
                        </div>
                </form>
            </div>
        </div> 
    </div>    
</div>

https://jsfiddle.net/gpazs5pt/1/

是否有任何简单的技术来调整这些引导元素的相等宽度

2 个答案: