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

Question

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

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

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

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

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

问题:

有人可以解释一下如何在 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>