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

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/popper.js@1.16.0/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

我已经为您复制了 bootstrap 3.3.7 中的 input-lg 样式。请检查这是否是您想要的输出。仅供参考，为 col 设置的最大数量是 12（例如 col-sm-12），它必须与父 class 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/popper.js@1.16.0/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>

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

Unable to enlarge the size of the modal form textbox

html

bootstrap-modal

bootstrap-4