Question

我试图布置一个引导形式，其中第一行有1个输入，第二行有2个输入。这是一张无法正常工作的照片，你可以看到我想要做的事......

哦，我希望那些男孩能够聪明地排队！我一直盯着这个太长时间 - 这感觉就像一个边缘问题，但我可能只是错过了一些明显的东西。

有人能发现我的错误吗？我已经把它归结为骨头：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>
<body>
<div class="container body-content"><br><br>

  <form>
  <div class="form-horizontal row">

    <div class="form-group col-sm-12">
        <label class="control-label col-sm-2">Supplier</label>
        <div class="col-sm-10">
          <input class="form-control"/>
        </div>
    </div>

    <div class="row">
      <div class="form-group col-sm-6">
          <label class="control-label col-sm-4">Contact</label>
          <div class="col-sm-8">
            <input class="form-control"/>
          </div>
      </div>
      <div class="form-group col-sm-6">
          <label class="control-label col-sm-4">Phone</label>
          <div class="col-sm-8">
            <input class="form-control"/>
          </div>
      </div>
    </div>

  </div>
  </form>

</div>
</body>
</html>

希望你能帮忙！

Answer 1

不是将列数应用于表单控件，而是使用所需的列数包装<div>'s中的所有控件：

<div class="container body-content"><br><br>
    <form>
      <div class="form-horizontal">
        <div class="col-sm-12">
        <div class="form-group">
            <label class="control-label col-sm-2">Supplier</label>
            <div class="col-sm-10">
              <input class="form-control"/>
            </div>
        </div>
        </div>
        <div class="col-sm-6">
          <div class="form-group">
              <label class="control-label col-sm-4">Contact</label>
              <div class="col-sm-8">
                <input class="form-control"/>
              </div>
          </div>
        </div>
        <div class="col-sm-6">
          <div class="form-group">
              <label class="control-label col-sm-4">Phone</label>
              <div class="col-sm-8">
                <input class="form-control"/>
              </div>
          </div>
        </div>
      </div>
    </form>

这是一个现场演示
http://www.bootply.com/I5gUPVenbA

引导表单和列不对齐

1 个答案: