CSS Twitter bootstrap 3中的form-horizontal和单行多输入列

在本文中，我们将介绍CSS Twitter bootstrap 3中的form-horizontal以及如何在单行上使用多个输入列。

阅读更多：CSS 教程

CSS Twitter bootstrap 3简介

Twitter bootstrap是一个开源的前端框架，可以帮助开发人员快速构建现代化和响应式的网站和应用程序。它提供了一套预定义的CSS类和JavaScript插件，使开发过程更加简单和高效。

form-horizontal

form-horizontal是一种布局方式，可以使表单在水平方向上显示，而不是默认的垂直方向。这种布局方式更加适合于桌面应用程序，可以在同一行上显示多个输入字段和标签。

下面是一个使用form-horizontal布局的示例代码：

<form class="form-horizontal">
  <div class="form-group">
    <label for="input1" class="col-sm-2 control-label">Input 1</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="input1" placeholder="Input 1">
    </div>
  </div>
  <div class="form-group">
    <label for="input2" class="col-sm-2 control-label">Input 2</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="input2" placeholder="Input 2">
    </div>
  </div>
</form>

在这个示例中，我们使用了form-horizontal类来定义一个水平布局的表单。每个输入字段都被包装在form-group类中，并使用col-sm-2和col-sm-10类定义了标签和输入字段的宽度。

单行多输入列

有时候，我们希望在同一行上显示多个输入字段，以节省空间或使表单更加紧凑。在CSS Twitter bootstrap 3中，我们可以使用栅格系统将表单分割成多个列。

下面是一个实现单行多输入列的示例代码：

<form>
  <div class="row">
    <div class="col-sm-4">
      <input type="text" class="form-control" placeholder="Input 1">
    </div>
    <div class="col-sm-4">
      <input type="text" class="form-control" placeholder="Input 2">
    </div>
    <div class="col-sm-4">
      <input type="text" class="form-control" placeholder="Input 3">
    </div>
  </div>
</form>

在这个示例中，我们使用了row类来创建一个行。然后，我们在行内使用col-sm-4类将表单分割成了三个相等宽度的列。每个列内都有一个输入字段。