如何实现按钮与上方元素的对齐、居中同步及响应式布局？

嘿，我来帮你搞定这两个布局问题！结合你用的Bootstrap 3，我会一步步给出调整方案，保证实现需求的同时还能完美适配不同屏幕：

需求1：按钮/元素与上方元素同一行排列 #

要实现同行布局，核心是利用Bootstrap的栅格系统，把需要同行的元素放在同一个.row容器内。你原来的代码里把well和按钮分在了两个错误的row-xs-6容器（Bootstrap 3里没有row-xs-*这个类，正确的是col-xs-*），所以我们调整结构如下：

• 将well和按钮放入同一个.row中
• 给两者分配合适的栅格列宽，比如.col-xs-9和.col-xs-3，让它们自动在一行排列并适配屏幕

核心代码片段：

<div class="container-fluid">
  <div class="row">
    <!-- 上方well元素 -->
    <div class="col-xs-9">
      <div class="well position-message">
        这里放你的内容
      </div>
    </div>
    <!-- 同行按钮 -->
    <div class="col-xs-3 text-center" style="margin-top:10%;">
      <button type="button" class="button-shape">
        <i class="fa fa-arrow-right"></i>
      </button>
    </div>
  </div>
</div>

💡 说明：

• .row是Bootstrap的行容器，内部的.col-xs-*会自动浮动对齐
• text-center让按钮在自己的列内水平居中
• margin-top:10%和well的margin-top保持一致，保证垂直方向对齐

需求2：按钮在上方元素正下方居中，同步响应式 #

要让按钮始终跟着well的宽度自适应并保持正下方居中，我们需要把两者放在同一个父容器里，由父容器统一控制宽度：

首先替换你原来的.position-message类，用响应式的方式控制宽度（替代固定的margin-left/right:25%）：

.position-message {
  margin-top: 10%;
  margin-bottom: 20%;
}
/* 控制well和按钮的父容器宽度 */
.well-container {
  width: 50%;
  margin: 0 auto;
}
/* 小屏幕下调整容器宽度，提升可读性 */
@media (max-width: 768px) {
  .well-container {
    width: 80%;
  }
}

然后调整HTML结构，把well和按钮放入同一个父容器，按钮用text-center居中：

<div class="container-fluid">
  <div class="well-container">
    <div class="well position-message">
      这里放你的内容
    </div>
    <div class="text-center">
      <button type="button" class="button-shape">
        <i class="fa fa-arrow-down"></i>
      </button>
    </div>
  </div>
</div>

💡 说明：

• .well-container通过width:50%和margin:0 auto实现水平居中，和你原来的左右margin效果一致，但配合媒体查询能在小屏幕自动调整宽度
• 按钮的text-center是基于父容器的宽度居中，所以会始终对齐well的正下方

完整修改后的代码 #

这里整合了两个需求的实现，你可以根据需要选择对应的结构：

<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;lang=en" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
    .background { 
      background-color: maroon; 
    } 
    .button-shape { 
      border-radius: 50%; 
      width: 50px; 
      height: 50px; 
      border: none;
      background: #fff; /* 加白色背景，避免在栗色背景下看不见按钮 */
      cursor: pointer;
    }
    /* 需求2的样式 */
    .position-message {
      margin-top: 10%;
      margin-bottom: 20%;
    }
    .well-container {
      width: 50%;
      margin: 0 auto;
    }
    @media (max-width: 768px) {
      .well-container {
        width: 80%;
      }
    }
  </style>
</head>
<title>Click to get quotes</title>
<body class="background">
  <!-- 需求1：同一行布局示例 -->
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-9">
        <div class="well position-message">
          这是上方同行元素的内容
        </div>
      </div>
      <div class="col-xs-3 text-center" style="margin-top:10%;">
        <button type="button" class="button-shape">
          <i class="fa fa-arrow-right"></i>
        </button>
      </div>
    </div>
  </div>

  <hr style="margin:50px 0; border-color:rgba(255,255,255,0.2);">

  <!-- 需求2：正下方居中布局示例 -->
  <div class="container-fluid">
    <div class="well-container">
      <div class="well position-message">
        这是上方元素的内容
      </div>
      <div class="text-center">
        <button type="button" class="button-shape">
          <i class="fa fa-arrow-down"></i>
        </button>
      </div>
    </div>
  </div>
</body>
</html>

补充几个小细节：

• 给按钮加了白色背景和鼠标指针样式，提升交互体验
• 修正了HTML里大小写错误的<Title>标签
• 去掉了多余的<br>标签，用CSS margin控制间距更规范

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