问题：
如何订购按钮
束高雅
const useStyles = makeStyles((theme) => ({
root: {
display: 'flex',
justifyContent: "center",
marginTop: '300px',
},
}));
export default function Menu() {
const classes = useStyles();
return (
<div className={classes.root}>
<Grid container spacing={1}>
<Grid container item xs={3} spacing={3}>
<Button
style={{ width: '300px', padding: '60px', margin: '15px' }}
variant='contained' color='Default'>
<AddIcon />Study
</Button>
</Grid>
<Grid container item xs={3} spacing={3}>
<Button
style={{ width: '300px', padding: '60px', margin: '15px' }}
variant='contained' color='Default'>
<AddIcon />All Studies
</Button>
</Grid>
<Grid container item xs={3} spacing={3}>
<Button
style={{ width: '300px', padding: '60px', margin: '15px' }}
variant='contained' color='Default'>
<AddIcon />Planning
</Button>
</Grid>
<Grid container item xs={3} spacing={3}>
<Button
style={{ width: '300px', padding: '60px', margin: '15px' }}
variant='contained' color='Default'>
<AddIcon />Products
</Button>
</Grid>
<Grid container item xs={3} spacing={3}>
<Button
style={{ width: '300px', padding: '60px', margin: '15px' }}
variant='contained' color='Default'>
<AddIcon />Platform
</Button>
</Grid>
<Grid container item xs={3} spacing={3}>
<Button
style={{ width: '300px', padding: '60px', margin: '15px' }}
variant='contained' color='Default'>
<AddIcon />Clients
</Button>
</Grid>
</Grid>
</div>
)
}
共有1个答案
尉迟跃
您可以分成两组DIV：
<div container className={classes.root}>
<div>
<Button
style={{ width: "300px", padding: "60px", margin: "15px" }}
variant="contained"
color="Default"
>
+ Study
</Button>
</div>
<div>
<Button
style={{ width: "300px", padding: "60px", margin: "15px" }}
variant="contained"
color="Default"
>
All Studies
</Button>
</div>
<div>
<Button
style={{ width: "300px", padding: "60px", margin: "15px" }}
variant="contained"
color="Default"
>
Planning
</Button>
</div>
</div>
<div>
<div>
<Button
style={{ width: "300px", padding: "60px", margin: "15px" }}
variant="contained"
color="Default"
>
Platform
</Button>
</div>
<div>
<Button
style={{ width: "300px", padding: "60px", margin: "15px" }}
variant="contained"
color="Default"
>
Products
</Button>
</div>
<div>
<Button
style={{ width: "300px", padding: "60px", margin: "15px" }}
variant="contained"
color="Default"
>
Clients
</Button>
</div>
</div>
或者您可以使用作为一个重要组件的网格：
<div className={classes.root}>
<Grid container spacing={3} direction="row" justify="center" alignItems="center">
<Grid item>
<Button
style={{ width: "300px", padding: "60px", margin: "15px" }}
variant="contained"
color="Default"
>
+ Study
</Button>
</Grid>
<Grid item>
<Button
style={{ width: "300px", padding: "60px", margin: "15px" }}
variant="contained"
color="Default"
>
All Studies
</Button>
</Grid>
<Grid item>
<Button
style={{ width: "300px", padding: "60px", margin: "15px" }}
variant="contained"
color="Default"
>
Planning
</Button>
</Grid>
</Grid>
<Grid container spacing={3}>
<Grid item>
<Button
style={{ width: "300px", padding: "60px", margin: "15px" }}
variant="contained"
color="Default"
>
Platform
</Button>
</Grid>
<Grid item>
<Button
style={{ width: "300px", padding: "60px", margin: "15px" }}
variant="contained"
color="Default"
>
Products
</Button>
</Grid>
<Grid item>
<Button
style={{ width: "300px", padding: "60px", margin: "15px" }}
variant="contained"
color="Default"
>
Clients
</Button>
</Grid>
</Grid>
</div>
如果你愿意，可以从这个链接中了解详细信息。
类似资料：
-
他，大家！我的测试是由jenkins从通用包运行的。我可以在spock中设置测试包，它将首先运行，如果在这个包中没有通过任何测试，其他测试应该跳过。我看到这样的例子：
-
问题内容： 我目前有使用PIVOT生成如下表的查询： 我想做的是，但看起来像是拉伸，结果是值递减。 这是查询： 这样做会产生错误，因此可以指定列吗？ 问题答案： 试试这个：
-
问题内容： 我正在尝试从Firebase订购数据，因此最近的帖子位于顶部（如Instagram），但我无法使其正常运行。我应该使用服务器时间戳吗？是否有一个“ createdAt”字段？ 问题答案： 仅对数组使用 reverse（） 不足以包含所有内容。您需要考虑不同的事情： 在检索数据时进行限制，请使用 append（） ，然后使用 reverse（） 可以节省时间。您不需要每次都删除所有数组。
-
我有这个模型： 和存储库为： 我想做的： 过期日期已过（过期，当前日期大于过期日期）=>orderBy desc 否则，当过期日期未过（post not expired）=>orderBy asc 示例：如果我有过期日期列表：星期一、星期二、星期三、星期四和星期五 今天是星期三（星期三还没过完）。 所需的结果： 星期三 星期四 星期五 星期二 星期一 有人有什么办法吗？
-
问题内容： 我有一个与数据库对话的servlet，然后返回一个有序（按时间排序）对象的列表。在servlet部分，我有 从日志中，我可以看到数据库以正确的顺序返回了User对象。 在前端，我有 但是顺序改变了。 我只在返回的列表很大（超过130个用户）时才注意到这一点。 我尝试使用Firebug进行调试，Firebug中的“响应选项卡”显示列表的顺序与servlet中的日志不同。 我做错了什么吗？