css - Bootstrap 中文本框的正常宽度

Question

我需要在 form-group 中添加一个文本框。根据我的要求，我需要限制全宽。不提宽度，网格系统，我们如何在 Bootstrap 中应用正常宽度？

<div class="form-group">
  <label>Phone </label>
  <input class="form-control" type="text">
</div>

Answer 1

您可以通过这种方式在输入字段上应用您的 CSS -

 .form-group input.form-control{
      width: 400px; // or width:auto if you don't want to fix any width
      max-width: 100%; //Example
 }

或者你可以给一个新的类名来在某个输入字段上应用css。像这样-

 <div class="form-group">
      <label>Phone </label>
      <input class="form-control my-input" type="text">
 </div>


 .form-group .my-input{
      width: 400px;
      max-width: 100%;
 }

但是请记住，在头中链接 Bootstrap 的 css 文件后，您必须链接 CSS 文件。另外，如果您无法以某种方式覆盖 CSS，则可以使用 '!important' 来覆盖它。例如--

 .form-group input.form-control{
      width: 400px !important;
      max-width: 100% !important;
 }