如何在Container或Card中实现多个Outline Buttons的自动换行？

一、Material UI 适配方案（对应你的 Container/Card/OutlineButton） #

利用MUI的Box组件配合Flex布局，就能轻松实现按钮自动换行，完美适配Card或Container容器：

import { Container, Card, Box, Button } from '@mui/material';

export default function WrappedOutlineButtons() {
  return (
    <Card sx={{ padding: 2 }}> {/* 替换为<Container>即可适配容器组件 */}
      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
        <Button variant="outlined">按钮1</Button>
        <Button variant="outlined">按钮2</Button>
        <Button variant="outlined">带较长文本的按钮3</Button>
        <Button variant="outlined">按钮4</Button>
        <Button variant="outlined">按钮5</Button>
        {/* 可添加更多按钮 */}
      </Box>
    </Card>
  );
}

核心逻辑：flexWrap: wrap让按钮在容器宽度不足时自动换行，gap属性统一控制按钮间的间距，无需手动计算每行容纳数量。

二、Bootstrap 场景方案 #

如果使用Bootstrap的Card和轮廓按钮，直接通过内置类实现：

<div class="card p-3">
  <div class="d-flex flex-wrap gap-2">
    <button type="button" class="btn btn-outline-primary">按钮1</button>
    <button type="button" class="btn btn-outline-primary">按钮2</button>
    <button type="button" class="btn btn-outline-primary">带较长文本的按钮3</button>
    <button type="button" class="btn btn-outline-primary">按钮4</button>
  </div>
</div>

三、原生CSS通用方案 #

不管使用什么框架，核心都是Flex布局的自动换行逻辑，通用代码如下：

.button-wrap-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px; /* 按钮间距 */
  padding: 16px; /* 容器内边距，避免按钮贴边 */
}

.outline-button {
  padding: 8px 16px;
  border: 1px solid #0d6efd;
  background-color: transparent;
  border-radius: 4px;
  cursor: pointer;
}

<div class="card"> <!-- 替换为任意容器组件均可 -->
  <div class="button-wrap-container">
    <button class="outline-button">按钮1</button>
    <button class="outline-button">按钮2</button>
    <button class="outline-button">带较长文本的按钮3</button>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Cliff Odebala Clarke