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

Question

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

为了重新定位到堆叠布局，我尝试将标签放在与输入相同的 div 内。我还尝试在提到的父 div 上设置 col-xs-1 属性 here或增加 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-horizo​​ntal)网格内的父列。现在您拥有的子列是 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>