如何制作标签列适合最大标签的引导表单？答案

【问题标题】：How to make a bootstrap form where the label column fits the largest label?如何制作标签列适合最大标签的引导表单？
【发布时间】：2015-02-09 13:25:28
【问题描述】：

例如，当我将Password 的标签设置得太长时，它会超出列的边界并且不完全可见。

Here's the CodeLab

有没有办法根据最大的标签尺寸制作一个自动调整大小的 Bootstrap 表单？

【问题讨论】：

这就是表格的用途。
@Dellkan 互联网告诉我表格很愚蠢，例如here
正确 - 这是因为表格曾经被滥用到地狱并返回以创建实际的横向布局。 Tables 在 html 中没有很多好的使用领域，但这是少数例外之一。
通常你的问题不会发生，因为在xs 大小你将列“堆叠”在彼此之上，此时你的标签拥有世界上所有的空间，这是他们为什么你不希望标签具有移动格式？
@MichaelColeman 我不明白你从哪里获得移动格式。我只需要输入行，标签在左边，输入在右边。当我为标签选择一个设置的列宽时，有时最终会出现标签有点太长并被输入框覆盖

标签： html css forms twitter-bootstrap

【解决方案1】：

我认为在此示例中可能不需要表格。虽然在这种情况下 <td> 会提供必要的响应能力，但您仍可能在非常小的屏幕上遇到同样的问题：没有足够的空间来显示最长的标签。

我将如何解决这个问题：

<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 宽度时，通过将<label> 从col-xs-2 更改为col-xs-12 并将<input> 从col-xs-10 更改为col-xs-12。我还在类中添加了其他 3 种尺寸，以便您更好地控制此布局。

希望这能提供一些见解！

这是一个活生生的例子：

Bootply

【讨论】：

【解决方案2】：

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

这是一个工作 demo - http://jsbin.com/kizupagira/1/edit?html,js,output

我不确定是什么在生成标签，因此脚本需要对密码字段中的字符数运行条件检查才能更新表单。

【讨论】：

使用 col-X-Y 对我不起作用，因为添加更多文本时列不会扩展
谢谢迈克尔，这很有创意。我希望有一种更简单的方法，就像只有 CSS 一样。与此同时，我会接受你的建议，因为我已经在使用 Angular

【解决方案3】：

您正在使用col-xs-2。它有width: 16.66666667%;。所以如果你需要调整这个 DIV 的大小，你需要像这样替换宽度值：

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

或者替换 bootstrapMod.css 上的 col-xs_2 样式，如：

.col-xs-2 {width: initial;min-width: 16.66666667%;}

【讨论】：

【解决方案4】：

哎呀！这个线程上的每个人都需要考虑 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;
}

【讨论】：