Bootstrap CSS问题：小屏端下移右侧DIV以对齐下拉框

嘿，我来帮你搞定这个小屏对齐的问题！首先咱们得先把布局结构补全（Bootstrap的栅格列必须放在row容器里，不然容易出现布局偏移问题），然后用两种简单方法实现右侧DIV的下移：

方法1：用Bootstrap内置的响应式间距类 #

Bootstrap自带了现成的响应式margin/padding类，不用写额外CSS就能搞定。你只需要给右侧的question2 DIV加上针对小屏的margin-top类就行：

<div class="row">
  <div class="question1 col-lg-7 col-md-7 col-sm-7 col-xs-7">
    <!-- 左侧内容：标签 + 下拉框 -->
    <label for="mySelect">选择标签：</label>
    <select id="mySelect" class="form-control">
      <option>选项A</option>
      <option>选项B</option>
    </select>
  </div>
  <div class="question2 col-lg-5 col-md-5 col-sm-5 col-xs-5 mt-sm-3">
    <!-- 右侧需要下移的内容 -->
    <p>右侧内容区域</p>
  </div>
</div>

这里的mt-sm-3拆解一下：

• mt = margin-top（上外边距）
• sm = 仅在**屏幕宽度<768px（小屏设备）**时生效
• 3 = 对应Bootstrap的间距等级，值为1rem（你可以换成2对应0.5rem、4对应1.5rem，根据实际对齐需求调整）

如果只想在超小屏（手机，<576px）生效，就把mt-sm-3换成mt-xs-3。

方法2：自定义CSS媒体查询（更灵活） #

如果需要更精确的间距控制，或者你的Bootstrap版本没有响应式间距类，就用自定义媒体查询：

/* 针对小屏设备（这里以sm断点为例，可根据需求调整max-width） */
@media (max-width: 767.98px) {
  .question2 {
    margin-top: 0.8rem; /* 自己调整这个值，直到和左侧下拉框完美对齐 */
  }
}

HTML结构保持正常栅格布局即可：

<div class="row">
  <div class="question1 col-lg-7 col-md-7 col-sm-7 col-xs-7">
    <!-- 左侧内容 -->
  </div>
  <div class="question2 col-lg-5 col-md-5 col-sm-5 col-xs-5">
    <!-- 右侧内容 -->
  </div>
</div>

小提醒 #

• 务必把列放在row容器里！Bootstrap的栅格系统依赖row抵消列的默认padding，不然布局容易跑偏。
• 调整间距时，建议在浏览器开发者工具的移动端模式或者实际小屏设备上测试，确保对齐效果符合预期。

内容的提问来源于stack exchange，提问作者gene b.