bootstrap怎么控制组件的间距

Posted 2023-04-02

参考技术A 你可以给容器div添加一个类目,自定义间距,又可以自定义主题时候,调整边距,还可以在样式表类名哪里修改。

哪些 React Material-UI 组件为我的页面添加了间距（如 Bootstrap 中的行类）？

【中文标题】哪些 React Material-UI 组件为我的页面添加了间距（如 Bootstrap 中的行类）？

【英文标题】：Which React Material-UI components add a spacing to my page (like a row class in Bootstrap)?

【发布时间】：2020-03-03 21:53:45

【问题描述】：

我使用 React 和 Material-UI for React 创建了一个项目。

来自 Bootstrap 背景，我注意到这些组件都没有在其组件周围有任何边距。

在 Bootstrap 中，我可以像这样添加间距：

<div class="row">
    <div class="col-xs-12">
    ...
    </div>
</div>

但我不知道使用什么组件来创建这样的间距。

我目前正在使用自定义类来创建某种间距，但感觉不正确。

App.tsx：

<Container maxWidth="lg" className="container-padding">
    ...
</Container>

App.css：

.container-padding 
  padding: 30px;

例如，使用现有组件在这些元素之间添加间距：

我愿意接受建议。

【参考方案1】：

@material-ui 中有一个网格布局组件，类似于 Bootstrap 网格。两者都基于 12 列网格。

下面的例子演示了它，

import Box from '@material-ui/core/Box';
import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";

return (
<Box m=4>
 <Grid container spacing=3>
  <Grid item xs=6>
    <Paper>xs=6</Paper>
  </Grid>
  <Grid item xs=6>
    <Paper>xs=6</Paper>
  </Grid>
  <Grid item xs=3>
    <Paper>xs=3</Paper>
  </Grid>
  <Grid item xs=3>
    <Paper>xs=3</Paper>
  </Grid>
  <Grid item xs=3>
    <Paper>xs=3</Paper>
  </Grid>
  <Grid item xs=3>
    <Paper>xs=3</Paper>
  </Grid>
 </Grid>
</Box>
<Box mx=3>
  Box 2 content
</Box>
<Box my=3>
  Box 3 content
</Box>
);

总结一下，

m - 所有边距

mx - 水平间距

my - 垂直间距

【讨论】：

这将是完美的，但我的元素上方的间距不起作用。例如查看更新

使用带有 m/mx/my 的 Box 元素来实现间距。更新了代码，请检查

【参考方案2】：

我使用了 Heydon Pickering 的“Lobotomized Owl”选择器：* + *。

我创建了一个“容器”组件Vertical.js：

import React from 'react';
import  makeStyles  from '@material-ui/core/styles';
import  Box  from '@material-ui/core';

const useStyles = makeStyles((theme) => (
  vertical: 
    '& > *+*': 
      marginTop: '1.5rem',
    ,
  ,
));

const Vertical = ( children ) => 
  const classes = useStyles();
  return <Box className=classes.vertical>children</Box>;
;

export default Vertical;

然后在任何其他组件中使用它，例如Example.js:

import React from 'react';
import Vertical from './Vertical';

const Example = () => 
  return (
    <Vertical>
      <Component/>
      <Component />
      <Another />
      <AnotherComponent />
    </Vertical>
  );
;

export default Example;