Html 如何制作标签列与最大标签匹配的引导表单？

例如，当我将

Password

的标签设置得太长时，它超出了列的边界，并且不完全可见

是否有任何方法可以根据最大标签大小生成自动调整大小的引导表单

---

这是一个使用Javascript+Angular JS的解决方案，它根据密码标签中的字符数动态更改表单列布局。 您可以根据需要更改值

这是一个正在运行的演示

---

我不确定生成标签的是什么，所以脚本需要对密码字段中的字符数运行条件检查，以便更新表单

您正在使用

col-xs-2

。宽度：16.6667%。因此，如果需要调整此DIV的大小，则需要替换宽度值，如：

<label for="inputPassword" style="width: initial;min-width: 16.66666667%;" class="control-label col-xs-2">PasswordPassword</label>

---

我认为在这个例子中可能不需要表格。虽然在这种情况下，

将提供必要的响应能力，但在非常小的屏幕上仍然可能遇到相同的问题：没有足够的空间显示最长的标签

以下是我将如何解决这个问题：

<br>
<div class="container-fluid">
  <div class="bs-example">
    <form class="form-horizontal">
      <div class="form-group">
        <label for="inputEmail" class="control-label col-xs-12 col-sm-2 col-md-2 col-lg-2">Email</label>
        <div class="col-xs-12 col-sm-10 col-md-10 col-lg-10">
          <input class="form-control" id="inputEmail" placeholder="Email" type="email">
        </div>
      </div>
      <div class="form-group">
        <label for="inputPassword" class="control-label col-xs-12 col-sm-2 col-md-2 col-lg-2">Password</label>
        <div class="col-xs-12 col-sm-10 col-md-10 col-lg-10">
          <input class="form-control" id="inputPassword" placeholder="Password" type="password">
        </div>
      </div>
      <div class="form-group">
        <div class="col-xs-12 col-sm-offset-2 col-sm-10 col-md-offset-2 col-md-2 col-lg-offset-2 col-lg-2">
          <div class="checkbox">
            <label><input type="checkbox"> Remember me</label>
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="col-xs-12 col-sm-offset-2 col-sm-10 col-md-offset-2 col-md-2 col-lg-offset-2 col-lg-2">
          <button type="submit" class="btn btn-primary">Login</button>
        </div>
      </div>
    </form>
  </div>
</div>

电子邮件
密码
记得我吗
登录

当您将屏幕设置为

xs

宽度时，通过将

从

col-xs-2

更改为

col-xs-12

并将

从

col-xs-10

更改为

col-xs-12

将标签更改为浮动在元素上方。我还在类中添加了其他3种尺寸，以使您能够更好地控制此布局

希望这能提供一些见解

下面是一个活生生的例子：

---

哎呀！这个线程上的每个人都需要考虑CSS类

回答：

.control-label
{
    -ms-word-break: break-all;
    word-break: break-all;

    /* Non standard for WebKit */
    word-break: break-word;

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

---

这就是表格的用途。@Dellkan互联网告诉我表格是愚蠢的，例如正确的-这是因为过去表格被滥用来创造实际的侧面布局。表格在html中没有很多好的使用区域，但这是少数例外之一。通常情况下，问题不会发生，因为在

xs

size时，您将列“堆叠”在彼此的顶部，此时您的标签拥有世界上所有的空间，他们有什么理由让你不希望标签采用移动格式吗？@MichaelColeman我不明白你从哪里得到移动格式的。我只需要有一行输入，标签在左边，输入在右边。当我为标签选择一个设置的列宽时，有时会出现有点太长的标签，并被输入框覆盖使用

col-X-Y

对我不起作用，因为添加更多文本时列不会扩展Hanks Michael，这很有创意。我希望有一个更简单的方法，就像在CSS中一样。同时，我会同意你的建议，因为我已经在使用Angular了

.control-label
{
    -ms-word-break: break-all;
    word-break: break-all;

    /* Non standard for WebKit */
    word-break: break-word;

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}