Chakra-UI

Question

我最近在学习 NextJS with Chakra-UI。但是，我在响应 UI.

方面遇到了一些困难

这是屏幕截图。

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

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

Answer 1

最好使用flexbox。请记住，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>

Chakra-UI - 如何在屏幕变小时修改 ButtonGroup？

Chakra-UI - how to modify ButtonGroup when screen becomes small?

reactjs

next.js