CSS Bootstrap 3中的输入框宽度

在本文中，我们将介绍如何在Bootstrap 3中设置输入框的宽度。Bootstrap是一个流行的CSS框架，可以帮助我们快速构建响应式网站。在构建表单页面时，设置输入框宽度是一个重要的问题。

阅读更多：CSS 教程

固定宽度

在Bootstrap 3中，可以使用以下类来设置输入框的宽度：

.col-xs-：在所有屏幕尺寸下都使用同样的宽度。
.col-sm-：在屏幕尺寸大于或等于768px时使用同样的宽度。
.col-md-：在屏幕尺寸大于或等于992px时使用同样的宽度。
.col-lg-：在屏幕尺寸大于或等于1200px时使用同样的宽度。

这些类用于将输入框包装在网格系统的列中。以下是一个例子：

<div class="form-group">
  <div class="col-xs-4">
    <input type="text" class="form-control">
  </div>
</div>

在这个例子中，输入框的宽度被设置为占据网格系统的4个列。

百分比宽度

除了固定宽度，我们也可以使用百分比来设置输入框的宽度。在Bootstrap 3中，可以直接使用style 属性来设置输入框的宽度百分比。以下是一个例子：

<input type="text" class="form-control" style="width: 50%;">

在这个例子中，输入框的宽度被设置为父元素宽度的50%。

自适应宽度

Bootstrap 3还提供了一种自适应宽度的方法，在不同大小的屏幕上自动调整输入框的宽度。使用以下类可以实现此目的：

.input-lg：为大尺寸的输入框增加自适应宽度。
.input-sm：为小尺寸的输入框增加自适应宽度。

以下是一个例子：

<input type="text" class="form-control input-lg">
<input type="text" class="form-control input-sm">

在这个例子中，大尺寸的输入框将自动占据父元素宽度的100%，而小尺寸的输入框将自动占据父元素宽度的50%。

自定义宽度

如果以上的宽度选择不能满足需求，我们还可以通过自定义CSS来设置输入框的宽度。以下是一个例子：

<input type="text" class="form-control custom-input">

.custom-input {
  width: 200px;
}

在这个例子中，输入框的宽度被设置为200px。

总结

在本文中，我们介绍了在Bootstrap 3中设置输入框宽度的几种方法。我们可以使用固定宽度的网格系统类，百分比宽度的style 属性，自适应宽度的类，或者自定义CSS来实现不同宽度的输入框。根据具体需求，选择适合的方法来设置输入框的宽度。使用Bootstrap 3，我们能轻松地创建出漂亮且响应式的网页表单。