【问题标题】:Material UI stop Flexbox on small screenMaterial UI 在小屏幕上停止 Flexbox
【发布时间】:2020-11-23 21:41:09
【问题描述】:

是否可以使用 Material UI 在小屏幕上停止 Flexbox? 我需要 Bootstrap 中的 d-md-flex 类之类的东西,但使用的是 Material UI。

引导程序(按预期工作)

<div class="d-md-flex align-items-md-center">
    <div>Content #1</div>
    <div>Content #2</div>
</div>

反应:

<Box container display="flex">
    <Box item>Content #1</Box>
    <Box item>Content #2</Box>
</Box>

在大屏幕上,元素应该并排放置,在小屏幕上一个在另一个之上。

非常感谢任何输入!

【问题讨论】:

    标签: css reactjs flexbox material-ui


    【解决方案1】:

    如果我理解正确,您正在尝试做什么...您可以通过媒体查询来实现它,例如:

    import { useTheme } from '@material-ui/core/styles';
    import useMediaQuery from '@material-ui/core/useMediaQuery';
    import Box from '@material-ui/core/Box';
    import Container from '@material-ui/core/Container';
    
    const someComponent = () => {
      const theme = useTheme();
      const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
    
      return (
        <Container maxWidth="md">
          <Box container display={isMobile ? 'block' : 'flex'}>
            <Box item>Content #1</Box>
            <Box item>Content #2</Box>
          </Box>
        </Container>
      );
    };

    【讨论】:

    • 超级!我正是这个意思。感谢您的帮助。
    【解决方案2】:

    感谢您的回答。 不幸的是,使用 Grid 不可能让列完全靠在一起(由于列的大小)。我正在寻找相同的行为,但使用保持子元素靠近的 Box 元素。感谢您的意见。

    【讨论】:

      猜你喜欢
      • 2019-06-23
      • 1970-01-01
      • 2023-02-16
      • 2021-12-06
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2020-04-14
      相关资源
      最近更新 更多