Angular14+SCSS：响应式模式下垂直排列按钮时取消左侧边距

1. 组件模板结构 #

给按钮套一个容器，方便统一控制布局：

<div class="dialog-button-group">
  <button class="dialog-btn">I am feeling lucky</button>
  <button class="dialog-btn">Not lucky</button>
</div>

2. SCSS基础样式（默认水平布局） #

用Flex布局实现按钮水平排列，通过相邻选择器给第二个按钮加左侧间距：

.dialog-button-group {
  display: flex;
  // 若需要按钮组在弹窗内水平居中，可追加 justify-content: center;
}

.dialog-btn {
  // 基础按钮样式，可根据需求调整
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

// 给第二个按钮添加左侧20px间距
.dialog-btn + .dialog-btn {
  margin-left: 20px;
}

3. 响应式布局调整 #

通过媒体查询设置断点（示例用768px，可根据项目需求修改），切换为垂直排列并调整样式：

@media (max-width: 768px) {
  .dialog-button-group {
    flex-direction: column;
    align-items: center; // 让按钮水平居中，满足垂直居中的视觉需求
    gap: 20px; // 可选：保持按钮间20px间距，替换水平margin为垂直间距
  }

  // 取消第二个按钮的左侧margin
  .dialog-btn + .dialog-btn {
    margin-left: 0;
    // 若不用gap，也可以用 margin-top: 20px; 实现垂直间距
  }
}

关键说明 #

• 用flex-direction: column切换按钮排列方向，比浮动更易维护。
• 相邻选择器.dialog-btn + .dialog-btn无需给按钮加额外类名，精准控制第二个按钮的间距。
• align-items: center确保垂直排列时，每个按钮在容器内水平居中，符合需求里的“垂直居中”视觉要求。
• 媒体查询的断点可根据项目的响应式规范自行调整（比如576px、992px等）。

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