无法在引导中更改输入框的大小，默认设置为input-sm

Not able to change size of input box in bootstrap, it is default set to input-sm

本文关键字：默认 input-sm 设置 输入      更新时间：2023-09-26

我想把日期时间选择器，我能够做到这一点，但我的输入框更小，即使我把'form-control input-lg'。请建议我如何更改尺寸。

我还想在文本框上重叠这个日期时间选择器图标。

下面是我的代码: 

$('#dateOfAlert1').datetimepicker({
  format: 'dd/MM/yyyy hh:mm:ss',
  language: 'en-US'
});
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>
<body>
  <label class="control-label" for="dateOfAlert">Date <span class="asteriskField"> * </span>
  </label>
  <div id="dateOfAlert1" class="input-append">
    <span class="add-on"> <i data-time-icon="icon-time"
    			data-date-icon="icon-calendar"></i>
    		</span> 
    <input type="text" id="dateOfAlert" name="dateOfAlert" class="form-control input-lg" />
  </div>
</body>

你有div类重写bootstrap

id ="dateOfAlert1"class = " input-append

删除输入追加或编辑该类中的输入。

$('#dateOfAlert1').datetimepicker({
  format: 'dd/MM/yyyy hh:mm:ss',
  language: 'en-US'
});
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>
<body>
  <label class="control-label" for="dateOfAlert">Date <span class="asteriskField"> * </span>
  </label>
  <div id="dateOfAlert1">
    <span class="add-on"> <i data-time-icon="icon-time"
    			data-date-icon="icon-calendar"></i>
    		</span> 
    <input type="text" id="dateOfAlert" name="dateOfAlert" class="form-control input-lg" />
  </div>
</body>

$('#dateOfAlert1').datetimepicker({
  format: 'dd/MM/yyyy hh:mm:ss',
  language: 'en-US'
});
.add-on{
position:relative;
 
}
.add-on .date-icon{
position:absolute;
  top:0px;
  left:0px;
}
.add-on{
width:50px!important;
}
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>
<body>
  <label class="control-label" for="dateOfAlert">Date <span class="asteriskField"> * </span>
  </label>
  <div id="dateOfAlert1" class="input-append">
    <span class="add-on"> <i data-time-icon="icon-time" class="date-icon" data-date-icon="icon-calendar"></i>
    		</span> 
    <input type="text" id="dateOfAlert" name="dateOfAlert" class="form-control input-lg" />
  </div>
</body>

相关文章：