Bootstrap3登录页面忘记密码链接响应式布局问题求助

这个问题在Bootstrap布局里很常见，核心原因是默认的.checkbox类是块级元素，当浏览器窗口宽度缩小到一定程度时，“忘记密码”链接没有足够的水平空间，就会被挤到下一行。下面给你几个实用的解决方案，让“记住我”复选框和“忘记密码”链接始终保持在同一行：

方法1：同容器内联布局 #

把“忘记密码”链接放到.checkbox容器内部，同时给标签和链接设置inline-block显示方式，确保它们在同一行排列，还能保持垂直对齐：

<div class="checkbox">
  <label style="display: inline-block; vertical-align: middle;">
    <input name="remember" type="checkbox" value="Remember Me"> Remember Me
  </label>
  <a href="#" style="display: inline-block; vertical-align: middle; margin-left: 15px;">忘记密码</a>
</div>

如果不想用内联样式，建议把样式抽成CSS类，方便复用：

.checkbox-inline-group label,
.checkbox-inline-group a {
  display: inline-block;
  vertical-align: middle;
}
.checkbox-inline-group a {
  margin-left: 15px;
}

然后给容器添加这个自定义类：

<div class="checkbox checkbox-inline-group">
  <label>
    <input name="remember" type="checkbox" value="Remember Me"> Remember Me
  </label>
  <a href="#">忘记密码</a>
</div>

方法2：响应式网格拆分 #

利用Bootstrap的响应式网格系统，把复选框和链接分别放在两列中，这样在各种屏幕尺寸下都能保持同一行布局：

<div class="row">
  <div class="col-xs-8">
    <div class="checkbox">
      <label>
        <input name="remember" type="checkbox" value="Remember Me"> Remember Me
      </label>
    </div>
  </div>
  <div class="col-xs-4 text-right" style="padding-top: 7px;">
    <a href="#">忘记密码</a>
  </div>
</div>

这里的padding-top:7px是为了让链接和复选框垂直居中对齐，你可以根据实际布局微调这个数值。

方法3：使用.form-inline类 #

借助Bootstrap内置的.form-inline类来实现内联表单布局，它会自动处理元素的排列：

<div class="form-inline">
  <div class="checkbox">
    <label>
      <input name="remember" type="checkbox" value="Remember Me"> Remember Me
    </label>
  </div>
  <a href="#" class="pull-right">忘记密码</a>
</div>

注意：.form-inline在超小屏幕（<768px）下默认会让元素堆叠，如果你想在小屏幕也保持同一行，可以添加额外样式：

@media (max-width: 767px) {
  .form-inline .checkbox,
  .form-inline a {
    display: inline-block;
    margin-right: 10px;
  }
}

以上几种方法都能有效解决换行问题，你可以根据自己的整体布局需求选择最合适的方案。

内容的提问来源于stack exchange，提问作者smitha gowda