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

Question

我已经定义了一些 Bootstrap 元素并且 想要将每个标签和输入集放置在堆叠布局中 。目前，当浏览器最大化时，布局定位强制标签位于相应控件的左侧。

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

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

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

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

问题：

谁能解释一下如何在 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。此外，此 class .control-label 必须由父级选择，因此它不会影响您文档中的任何其他类似 class。

更新：场景 -

图片 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

只需删除： div 和 class="form-horizontal"（它是结束标记）

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

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

编辑：如果你想要你的表格只有 4 列在 md 和大调整你的：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>

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

How to position label and input in a stacked layout?

html

layout

user-experience

twitter-bootstrap-3