无法放大模式表单文本框的大小

Question

我无法以模式形式扩大文本框的大小，在将文本'col-sm-20'多次替换为'input-lg'之后，我不确定为什么它仍然保持不变，请找出原因，谢谢！

<div class="form-group row align-items-center justify-content-center">
  <label style="font-family:Lato; font-size:20pt; font-weight:normal;" for="name" class="col-sm-4 control-label col text-left ">Created At:</label>
  <div class='col-sm-5'>
    <input type='text' class="form-control col-sm-15 row align-items-center justify-content-center" id='datetimepicker4' disabled />
  </div>
</div>

<div class="form-group row align-items-center justify-content-center">
  <label style="font-family:Lato; font-size:20pt; font-weight:normal;" for="name" class="col-sm-4 control-label col text-left">Updated At:</label>
  <div class='col-sm-5'>
    <input type='text' class="form-control col-sm-15 row align-items-center justify-content-center" id='datetimepicker5' disabled/>
  </div>
</div>

<div class="modal-footer">
  <button style="font-size:20px; background-color:orange ;" type="Submit" class="btn btn-primary">Done</button>
</div>
</form>
</div>
</div>
</div>
</div>

<!-- DateTimePicker -->



<!-- navigation bar & Dropdown menu -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

Answer 1

我已经为您复制了引导程序3.3.7中的input-lg样式。请检查是否这是您想要的输出。仅供参考，为col设置的最大数量为12（例如col-sm-12），并且必须与父类row一起使用才能生效。

.input-lg {
  height: 46px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
}

<div class="form-group row align-items-center justify-content-center">
  <label style="font-family:Lato; font-size:20pt; font-weight:normal;" for="name" class="col-sm-4 control-label col text-left ">Created At:</label>
  <div class='col-sm-5'>
    <input type='text' class="form-control input-lg row align-items-center justify-content-center" id='datetimepicker4' disabled />
  </div>
</div>

<div class="form-group row align-items-center justify-content-center">
  <label style="font-family:Lato; font-size:20pt; font-weight:normal;" for="name" class="col-sm-4 control-label col text-left">Updated At:</label>
  <div class='col-sm-5'>
    <input type='text' class="form-control input-lg row align-items-center justify-content-center" id='datetimepicker5' disabled/>
  </div>
</div>

<div class="modal-footer">
  <button style="font-size:20px; background-color:orange ;" type="Submit" class="btn btn-primary">Done</button>
</div>
</form>
</div>
</div>
</div>
</div>

<!-- DateTimePicker -->



<!-- navigation bar & Dropdown menu -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>