在这段代码中，存在一个问题：(inline controls in horizontal form)无法在水平表单中正确显示。这个问题的根本原因是结构不正确，所以需要对结构进行调整以使其适应一行显示。

解决这个问题的方法是：

1. 将`

`标签移至代码的顶部，以确保它不会影响表单的布局。

2. 将`

`标签中的``和`

`标签之间的所有内容移到外部的`

`标签之后。这样，每个``和相应的表单控件都会在同一行显示。

3. 删除第一个`

`标签中的`

`标签，因为它不再需要。

4. 删除第二个`

`标签中的`

`标签，因为它不再需要。

5. 将第二个`

`标签中的``标签移至`

`标签内，以确保它与其他表单控件在同一行显示。

修改后的代码如下所示：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<h1>Form test</h1>
<div class="form-horizontal">
  <div class="form-group">
    <label class="col-xs-2 control-label">First input</label>
    <div class="col-xs-3">
      <div class="input-group">
        <input type="text" class="form-control">
        <span class="input-group-btn">
          <button class="btn btn-default">
            some button
          </button>
        </span>
      </div>
    </div>
    <div class="col-xs-3">
      <select class="form-control">
        <option>Select1</option>
      </select>
    </div>
    <div class="col-xs-3">
      <select class="form-control">
        <option>Select2</option>
      </select>
    </div>
    <div class="col-xs-3">
      <select class="form-control">
        <option>Select3</option>
      </select>
    </div>
  </div>
  <div class="form-group">
    <label class="col-xs-2 control-label">Second input</label>
    <div class="col-xs-3">
      <input type="text" class="form-control">
      <span class="input-group-btn">
        <button class="btn btn-default">
          some other button
        </button>
      </span>
    </div>
    <div class="col-xs-3">
      <select class="form-control">
        <option>some other option</option>
      </select>
    </div>
  </div>
</div>

通过以上修改，(inline controls in horizontal form)问题得到了解决。现在，表单中的所有控件都能够在水平布局中正确显示在一行中。

0

匿名的 Posted 2023年9月20日

0 Comments

在上述代码中，存在一个问题：在水平表单中使用内联控件时，无法正确对齐控件。这可能是因为使用了不正确的类或标签导致的。

解决方法是将 `div` 元素的类从 `form-group` 更改为 `row`，以便正确对齐内联控件。以下是修改后的代码：

Form test

    

        First input
        

            

                

                    

                        

some button

Select1 Select2 Select3

Second input

some other button

some other option

通过这种修改，内联控件将正确对齐在水平表单中。