如何在堆叠布局中定位标签和输入？

Question

我已经定义了许多 Bootstrap 元素，并且希望将每个标签和输入集放置在堆叠布局中。目前布局定位迫使标签在浏览器最大化时位于相应控件的左侧。

为了重新定位到堆叠布局，我尝试将标签放置在与输入相同的 div 内。我还尝试在提到 here 的父 div 上设置 col-xs-1 属性或增加 col 大小，这只会将标签推到右侧覆盖输入而不是顶部。

所以目前的布局看起来像这样，我的标签与输入左对齐：

相反，我的目标是这样定位：

当我减小浏览器窗口的大小时，窗口确实会调整大小以堆叠标签，但当它最大化时，标签会出现在旁边。

问题：

有人可以解释如何在 Bootstrap 3 中堆叠标签和输入控件集吗？

我的布局示例：

<div class="container body-content">
  <div class="page-header">
    <div class="form-group">
      <fieldset>
        <form action="" id="createForm" class=
        "form-group has-feedback" method="post">
          <div class="form-horizontal">
            <div class="col-lg-12">

              <div class="form-group">
                <label class="col-md-1 control-label" for=
                "Application">Application</label>
                <div class="col-md-4">
                  <input id="ApplicationID" name="Application"
                  required="required" type="text" class=
                  "form-control" />
                </div>
              </div>

              <div class="form-group">
                <label class="col-md-1 control-label" for=
                "EscID">EM</label>
                <div class="col-md-4">
                  <input id="EscID" name="EM" type="text"
                  placeholder="(If Applicable)" class=
                  "form-control" />
                </div>

              </div>
            </div>

          </div>

        </form><!--END OF FORM ^^-->

      </fieldset>
    </div>
  </div>
</div>

Answer 1

这里的原因是您有 12 个父列（col-lg-12 - 就在.form-horizontal）网格内。现在您拥有的子列是col-md-1（用于标签）和col-md-4（用于输入）。所以他们应该在同一个父行中，列大小为 12(col-lg-12)。

你可以做的如下：

• 给出标签列 9 和输入列 4（原样）。所以总而言之，它超过了 12。这会迫使输入降低（根据需要堆叠）。
• 但是在给出标签列 9 时，您的文本会出现在右边（很远......），所以不要忘记将 CSS: text-align:left; 添加到 .control-label。此外，此类.control-label 必须由父级选择，因此不会影响您文档中的任何其他类似类。

更新：场景 -

图片1：

图 2：

图 3：

.control-label { text-align: left !important; }

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container body-content">
  <div class="page-header">
    <div class="form-group">
      <fieldset>
        <form action="" id="createForm" class="form-group has-feedback" method="post">
          <div class="form-horizontal">
            <div class="col-lg-12">

              <div class="form-group">
                <label class="col-md-9 control-label" for="Application">Application</label>
                <div class="col-md-4">
                  <input id="ApplicationID" name="Application" required="required" type="text" class="form-control" />
                </div>
              </div>

              <div class="form-group">
                <label class="col-md-9 control-label" for="EscID">EM</label>
                <div class="col-md-4">
                  <input id="EscID" name="EM" type="text" placeholder="(If Applicable)" class="form-control" />
                </div>

              </div>
            </div>

          </div>

        </form>
        <!--END OF FORM ^^-->

      </fieldset>
    </div>
  </div>
</div>

Answer 2

请参阅 Bootstrap 网站上的 basic form。

 <form>
      <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
      </div>
      <div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input type="file" id="exampleInputFile">
        <p class="help-block">Example block-level help text here.</p>
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox"> Check me out
        </label>
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>

Answer 3

只需删除： 带有 class="form-horizo​​ntal" 的 div（它是结束标签）

然后删除标签和输入标签的 col-md-4、col-md-9 类引用。

修改后的代码： https://jsfiddle.net/4bnndd8b/3/

编辑：如果您希望您的表格在 md 处只有 4 列，并且大调整您的 : class="col-lg-12" 参考...即 col-md-4 （md 和更大的将只是 4 列形式)。

<div class="container body-content">
<div class="page-header">
<div class="form-group">
  <fieldset>
    <form action="" id="createForm" class=
    "form-group has-feedback" method="post">
        <div class="col-lg-12">

          <div class="form-group">
            <label class="control-label" for=
            "Application">Application</label>

            <div class="">
              <input id="ApplicationID" name="Application"
              required="required" type="text" class=
              "form-control" />
            </div>
          </div>

          <div class="form-group">
            <label class="control-label" for=
            "EscID">EM</label>
            <div class="">
              <input id="EscID" name="EM" type="text"
              placeholder="(If Applicable)" class=
              "form-control" />
            </div>

          </div>
        </div>


    </form><!--END OF FORM ^^-->

  </fieldset>
</div>