Question

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

Here's the CodeLab

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

Form Bootstrap

Answer 1

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

这是一个有效的演示 - http://jsbin.com/kizupagira/1/edit?html,js,output

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

Answer 2

我认为在这个例子中可能没有必要使用表格。虽然在这种情况下<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更改为{{}，将标签更改为浮动在元素上方1}}和col-xs-12从<input>到col-xs-10。我还在课程中添加了其他3种尺寸，以便您更好地控制此布局。

希望这能提供一些见解！

这是一个实例：

Bootply

Answer 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%;}

Answer 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;
}

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

4 个答案: