html - 如何制作标签列适合最大标签的 Bootstrap 表格？

Question

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

Here's the CodeLab

有什么方法可以根据最大的标签尺寸制作一个自动调整大小的 Bootstrap 表单？

Answer 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> 将标签更改为 float 在元素上方来自col-xs-2到 col-xs-12和 <input>来自col-xs-10到 col-xs-12 .我还在类中添加了其他 3 种尺寸，以便您更好地控制此布局。

希望这能提供一些见解!

这是一个活生生的例子:

Bootply