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;
 }

Answer 2

您可以将style =“width：auto”用于默认文本框宽度

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.css" rel="stylesheet"/>
<div class="form-group">
  <label>Phone </label>
  <input class="form-control" style="width:auto" type="text">
</div>

正常宽度到引导程序中的文本框

2 个答案: