当屏幕变小时如何修改ButtonGroup？

Question

我最近正在学习NextJS和Chakra.然而，我在响应UI方面遇到了一些困难。

这是截图。

​

​

<Box mt={5}>
   <LightMode>
     <ButtonGroup>
         {socialButtons.map((social) => (
            <SocialButton social={social} key={social.name}/>
         ))}
     </ButtonGroup>
   </LightMode>
</Box>

如何将按钮移动到底部以匹配屏幕的响应？

Answer 1

如果你用柔性盒最好。请记住，ButtonGroup由Box组件组成，这样您就可以传递它的所有道具。方框组件它只是一个div元素。

   <Box mt={5}>
    <LightMode>
      <ButtonGroup display={'flex'} flexWrap={'wrap'}>
        <Button colorScheme="teal" size="lg" margin={'8px'}>
          Button
        </Button>
        <Button colorScheme="teal" size="lg" margin={'8px'}>
          Button
        </Button>
        <Button colorScheme="teal" size="lg" margin={'8px'}>
          Button
        </Button>
        <Button colorScheme="teal" size="lg" margin={'8px'}>
          Button
        </Button>
      </ButtonGroup>
    </LightMode>
  </Box>