Question

我正在使用bootstrap3并试图创建一种水平形式，其中一行应显示内联控件。

在下面的代码中，我希望三个选择与输入组在同一行。

我在这里尝试了以下方法：Form inline inside a form horizontal in twitter bootstrap?，但我无法使其正常工作。

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

  <!-- Optional theme -->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">

  <!-- Latest compiled and minified JavaScript -->
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>

<body>
  <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-10">
        <div class="form-group">
          <div class="input-group col-xs-4">
            <input type="text" class="form-control">
            <span class="input-group-btn">
                          <button class="btn btn-default">
                              some button
                          </button>
                      </span>
          </div>
          <div class="col-xs-6">
            <select>
              <option>Select1</option>
            </select>
            <select>
              <option>Select2</option>
            </select>
            <select>
              <option>Select3</option>
            </select>
          </div>
        </div>
      </div>
    </div>
    <div class="form-group">
      <label class="col-xs-2 control-label">Second input</label>

      <div class="col-xs-10">
        <p class="input-group">
          <input type="text" class="form-control">
          <span class="input-group-btn">
                        <button class="btn btn-default">
                            some other button
                        </button>
                    </span>
        </p>
        <select>
          <option>some other option</option>
        </select>
      </div>
    </div>
  </div>
</body>

</html>

Answer 1

您尝试过使用表格吗？

<table>
    <tbody>
        <tr>
            <td>
               <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>                
            </td>
            <td>
               <select>
                   <option>Select1</option>
               </select>
            </td>
             <td>
               <select>
                   <option>Select2</option>
               </select>
            </td>
            <td>
               <select>
                   <option>Select3</option>
               </select>                  
            </td>
        </tr>
    </tbody>
</table>

Answer 2

您可以尝试使用行类而不是表单组类，可以通过Boostrap 3进行尝试。

<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-10">
            <div class="row">
                <div class="col-xs-4">
                    <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-6">
                    <select>
                        <option>Select1</option>
                    </select>
                    <select>
                        <option>Select2</option>
                    </select>
                    <select>
                        <option>Select3</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="col-xs-2 control-label">Second input</label>

        <div class="col-xs-10">
            <p class="input-group">
                <input type="text" class="form-control">
                <span class="input-group-btn">
                    <button class="btn btn-default">
                        some other button
                    </button>
                </span>
            </p>
            <select>
                <option>some other option</option>
            </select>
        </div>
    </div>
</div>

https://jsfiddle.net/FJB_ZA/Lmzubdw3/

Answer 3

您需要对结构进行更改以使其适合一行。

<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-10">
        <div class="form-group">
          <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>
    </div>
    <div class="form-group">
      <label class="col-xs-2 control-label">Second input</label>

      <div class="col-xs-10">
        <p class="input-group">
          <input type="text" class="form-control">
          <span class="input-group-btn">
                        <button class="btn btn-default">
                            some other button
                        </button>
                    </span>
        </p>
        <select>
          <option>some other option</option>
        </select>
      </div>
    </div>
  </div>

水平形式的嵌入式控件

3 个答案: