React中如何实现两个图标并排显示？

你的代码里有几个关键问题导致图标始终上下排列：

• 跨平台库混用冲突：导入了React Native的View，但同时使用Web端的Bootstrap组件，两者布局系统不兼容，直接导致Bootstrap的Row/Col布局失效。
• 冗余样式干扰布局：给图标添加的float: right和display: inline-block会破坏Bootstrap Row自带的flex布局逻辑，反而打乱排列。
• 列宽度未明确约束：默认Col会自动分配宽度，若容器宽度不足或图标尺寸过大，很容易被挤到下一行。

修复方案1：纯Bootstrap实现（推荐） #

清理无关依赖，调整列配置并移除冗余样式：

// 移除React Native的View导入
// import { View } from 'react-native';
import CheckCircle from '@mui/icons-material/CheckCircle'
import styles from '../../App';
import { GiBroom } from 'react-icons/gi';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';

export default function LimpiarCurso(){
    return (
        <Container style={styles.container}>
            <Row className="align-items-center"> {/* 让图标垂直居中 */}
                <Col xs={6} className="d-flex justify-content-center"> {/* 占一半宽度，内容居中 */}
                    <CheckCircle sx={{ fontSize: 200, color: 'white', backgroundColor:'green', borderRadius: '8px' }} />
                </Col>
                <Col xs={6} className="d-flex justify-content-center">
                    <GiBroom size={200} />
                </Col>
            </Row>
        </Container> 
    )
}

修复方案2：纯MUI实现（若项目以MUI为主） #

如果更习惯用MUI，建议用它的Grid组件替代Bootstrap，避免样式冲突：

import CheckCircle from '@mui/icons-material/CheckCircle'
import styles from '../../App';
import { GiBroom } from 'react-icons/gi';
import { Grid, Box } from '@mui/material';

export default function LimpiarCurso(){
    return (
        <Box style={styles.container}>
            <Grid container spacing={2} alignItems="center">
                <Grid item xs={6} display="flex" justifyContent="center">
                    <CheckCircle sx={{ fontSize: 200, color: 'white', backgroundColor:'green', borderRadius: '8px' }} />
                </Grid>
                <Grid item xs={6} display="flex" justifyContent="center">
                    <GiBroom size={200} />
                </Grid>
            </Grid>
        </Box> 
    )
}

额外注意事项 #

• 不要同时混用Bootstrap和MUI的布局组件，两者样式优先级、布局逻辑不同，极易引发冲突。
• 检查styles.container中是否存在flex-direction: column或宽度设置过小的情况，这也会导致元素被迫换行。

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