Question

这是HTML：

<div class="row">
  <div class="right-block-title col-xs-12">Change Password</div>
</div>
<form id="change-password-form" class="form-horizontal">
  <div class="form-group">
    <label for="oldpass" class="control-label col-xs-4">Old Password</label>
    <input id="oldpass" type="password" name="oldpass" class="col-xs-8"/>
  </div>
  <div class="form-group">
    <label for="newpass" class="control-label col-xs-4">New Password</label>
    <input id="newpass" type="password" name="newpass" class="col-xs-8"/>
  </div>
  <div class="form-group">
    <label for="confirmnew" class="control-label col-xs-4">Confirm Password</label>
    <input id="confirmnew" type="password" name="confirmnew" class="col-xs-8"/>
  </div>
</form>

结果如下： https://jsfiddle.net/bsdca8zc/7/

如果您的屏幕足够大，您会看到该表单被吸到右侧。我想让它全部与左边对齐（如标题）。

我在表单组元素上尝试了pull-left，但它打破了布局。 margin-left元素上的否定form-group有效，但它根本不干净，因为每次我们更改标签时它都会中断（我也不会想到）它因响应原因而有用。）

Answer 1

horizontal form旨在显示内联小标签和高分辨率的标签。它显示了xs顶部的标签。您需要将类表单控件添加到此行为的输入中。目前尚不清楚这是否是您所追求的目标。

如果你只是想在这里对齐标签就是一个例子。将col-sm-3替换为col-xs-3并添加文本右对齐文本。

<div class="form-group">
    <label for="oldpass" class="control-label col-xs-3 text-right">Old Password</label>
    <input id="oldpass" type="password" name="oldpass" class="col-sm-6"/>
    <div class="indicator col-offset-3"></div>
</div>

https://jsfiddle.net/1heet5re/

可能需要更好地解释你想要实现的目标才能提供更多帮助。

表格水平拉动表格组向右

1 个答案: