Question

我在bootstrap中创建一个应该响应的表单。请参阅以下代码。

<form novalidate="novalidate" class="form-inline">
        <div class="form-group">
            <label class="col-sm-4 control-label" for="inputFirstName">First name:</label>

            <div class="col-sm-4">
                <input class="form-control" type="text" id="inputFirstName" ng-model="patient.firstName"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-4 control-label" for="inputLastName">Last name:</label>

            <div class="col-sm-4">
                <input class="form-control" type="text" id="inputLastName" ng-model="patient.lastName"/>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-4 control-label" for="inputMiddleName">Middle Name:</label>

            <div class="col-sm-4">
                <input class="form-control" type="text" id="inputMiddleName" ng-model="patient.middleName" placeholder="Middle name"/>
            </div>
        </div>
</form>

我需要在同一行上有2个字段（名字和姓氏），在其他行中需要中间名。这种形式有大约10个字段。

当我使用form-inline时，3个字段排列在一行中，并且行的字段之间没有空格。

我应该如何理解.col css。这与响应有什么关系。

Answer 1

我做了demo符合你的要求。

我已将表单组类更改为col-md-12以跨越整个屏幕并将表单包装在容器流体类中。

标记：

<div class="container-fluid">
<form novalidate="novalidate" class="form-inline">
    <div class="col-md-6">
        <label class="col-sm-4 control-label" for="inputFirstName">First name:</label>

        <div class="col-sm-4">
            <input class="form-control" type="text" id="inputFirstName" ng-model="patient.firstName">
        </div>
    </div>
    <div class="col-md-6">
        <label class="col-sm-4 control-label" for="inputLastName">Last name:</label>

        <div class="col-sm-4">
            <input class="form-control" type="text" id="inputLastName" ng-model="patient.lastName">
        </div>
    </div>

    <div class="col-md-12">
        <label class="col-sm-2 control-label" for="inputMiddleName">Middle Name:</label>

        <div class="col-sm-4">
            <input class="form-control" type="text" id="inputMiddleName" ng-model="patient.middleName" placeholder="Middle name">
        </div>
    </div>
</form>
</div>

为了获得第一行和第二行之间的空格，您可以通过添加.col-md-12{margin-top:20px;}来覆盖bootstrap css

Answer 2

要在同一行中获取2个字段，请在一个form_group下写下这两个字段，然后更改.col css，如下所示。城市和州字段显示在同一行。

<div class="container-fluid">
<div class="col-md-4">
      <form class="form-horizontal" role="form">
        <fieldset>

          <legend>Details</legend>

          <div class="form-group">
            <label class="col-sm-3 control-label" for="inputFirstName">First Name:</label>
            <div class="col-sm-9">
              <input class="form-control" type="text" id="inputFirstName" ng-model="patient.firstName" placeholder="First name"/>
            </div>
          </div>

          <div class="form-group">
            <label class="col-sm-3 control-label" for="inputLastName">Last Name:</label>
            <div class="col-sm-9">
              <input class="form-control" type="text" id="inputLastName" ng-model="patient.lastName" placeholder="Last name"/>
            </div>
          </div>

          <div class="form-group">
            <label class="col-sm-2 control-label" for="textinput">city:</label>
            <div class="col-sm-4">
              <input class="form-control" type="text" id="inputCity" ng-model="patient.city" placeholder="city"/>
            </div>

            <label class="col-sm-2 control-label" for="textinput">state</label>
            <div class="col-sm-4">
              <input class="form-control" type="text" id="inputState" ng-model="patient.state" placeholder="State"/>
            </div>
          </div>
        </fieldset>
      </form>
</div>
</div>

如何使用bootstrap在同一行上显示2个表单字段

2 个答案: