css - Form-horizo​​ntal 将 form-group 拉到右边

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/

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

我在 form-group 元素上尝试了 pull-left，但它破坏了布局。 form-group 元素上的负 margin-left 有效，但它根本不干净，因为每次我们更改标签时它都会中断(我也不出于响应的原因，我认为它是好的)。

Answer 1

horizontal form旨在为小分辨率和大分辨率显示内联标签。它在 xs 的顶部显示标签。对于此行为，您需要将类 form-control 添加到您的输入中。目前尚不清楚这是否是您所追求的。

如果你只是想对齐标签这里是一个例子。 col-sm-3 已替换为 col-xs-3，并添加了 text-right 以右对齐文本。

<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/

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