如何在Bootstrap登录表单中设置含Logo的新行并将Logo右对齐？

嗨，我来帮你搞定Bootstrap 3登录页的这两个问题！

一、把Logo对齐到右侧的两种简单方法 #

Bootstrap 3自带了现成的类可以直接实现，不用自己写额外CSS：

• 方法1：用pull-right类
  直接把这个类加到你的Logo元素上，它会让元素向右浮动，比如：

  <img src="你的logo路径.png" class="pull-right" alt="网站Logo">
  

• 方法2：用text-right类
  如果Logo是放在一个列（col-*）容器里，给这个列加上text-right，就能让容器内的内容（包括Logo）右对齐，比如：

  <div class="col-xs-12 text-right">
    <img src="你的logo路径.png" alt="网站Logo">
  </div>
  

  这种方法适合需要让整个列内容都右对齐的场景，比浮动更稳定。

二、关于“用相同单元格类创建新行”的问题 #

完全可以！Bootstrap的网格系统核心是行（row）+ 列（col-*），只要每一行里的列宽度总和是12（或者结合偏移类调整），不同行的元素数量、列分配完全可以不一样，互不影响。

举个完整的示例给你参考：

<div class="container">
  <!-- Logo行：单独一行，整列宽度，Logo右对齐 -->
  <div class="row">
    <div class="col-xs-12 text-right">
      <img src="你的logo路径.png" alt="网站Logo" class="img-responsive">
    </div>
  </div>

  <!-- 登录表单行：居中的表单容器，和上一行列数完全不同 -->
  <div class="row">
    <div class="col-md-4 col-md-offset-4">
      <form class="login-form">
        <div class="form-group">
          <label for="username">用户名</label>
          <input type="text" class="form-control" id="username" placeholder="请输入用户名">
        </div>
        <div class="form-group">
          <label for="password">密码</label>
          <input type="password" class="form-control" id="password" placeholder="请输入密码">
        </div>
        <button type="submit" class="btn btn-primary btn-block">登录</button>
      </form>
    </div>
  </div>
</div>

这里第一行是占满12列的Logo容器，第二行是偏移4列、占4列的表单容器，两者的列配置完全独立，完全符合你的需求。

另外补充个小细节：给Logo加上img-responsive类，可以让它在不同屏幕尺寸下自动缩放，避免小屏幕上溢出。

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