Question

我试图在所有情况下为所有字段设置相同的输入大小：XS，SM，LG等使用bootstrap。但是，除制裁日期字段外，所有字段都保持相同的大小。

这是下图：

以下是代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Record Loan Type Information</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>
 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;">Record Loan Type Information</h3>       
            </div>

            <div class="panel-body">

                <form class="form-horizontal" >
                        <div class="form-group">
                         <label class="control-label col-sm-3"  for="acode">Loan ID:</label>
                         <div class="col-sm-8">
                             <div class="input-group">                                             
                               <input type="text" class="form-control" id="acode"  placeholder="Enter Loan 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">                                 
                                  <input type="text" class="form-control" placeholder="Enter Loan Name" >         
                                </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

将此添加到您的自定义CSS。

您需要修改datetimepicker的输入宽度

#datetimepicker1{
  width:159px;
}

如何在bootstrap中保持日期输入字段大小与其他字段的大小相同

1 个答案: