在底部材料界面上对齐卡片按钮 [英] Align Card Buttons on bottom Material UI

问题描述

我正在使用ReactJS开发一个应用程序，并且我使用以下应用程序:MaterialUI(用于react)和React Flexbox.

我遇到的问题是试图将卡按钮定位在底部(这个问题似乎在不同的框架中散布了互联网).我正在从这里使用卡片->

也可以参考一下，这是我的代码在react中的外观(ApiPosts是我的卡片组件)->

 <网格容器><网格项xs = {12}>< Paper className = {classes.paper}><行className ="rowSpacer">< Col xs><版式变体=标题" align ="center" color ="textPrimary" gutterBottom>帖子在下面</Typography></Col></行><除法器/>< ApiPosts/></Paper></Grid></Grid> 

最后，我的卡片被包裹在< Row around ="xs"> 中(连续4个帖子)，每张卡片都放在col < Col xs>

提前谢谢！

感谢Ivan的回答.这里是万一需要的代码(在Material-UI卡上工作).

  .portCardCl {显示:flex;flex-direction:列;高度:100％;}.portBodyCl {显示:flex;flex:1 0自动;align-items:flex-end;证明内容:中心；flex-direction:列;}.portButCl {显示:flex;证明内容:flex-start;} 

portCardCl 放在第一个< Card> 上， portBodyCl 放在< CardActionArea> 上，最后 portButCl 继续进行< CardActions>

解决方案

以下是css-grid的示例.

  const {按钮，createMuiTheme，CssBaseline，MuiThemeProvider，版式，纸，withStyles，} = window ['material-ui'];const styles = theme =>({根: {显示:网格"，gridTemplateColumns:"repeat(4，1fr)"，gridGap:"24px"，}，卡片: {显示:网格"，gridTemplateRows:"1fr自动"，gridGap:"8px"，minHeight:280，backgroundImage:`url(https://via.placeholder.com/100x200)`，backgroundSize:封面"}，身体: {alignSelf:结束"，textAlign:居中"}，动作:{显示:"flex"，justifyContent:之间的空间"}});const Grid = withStyles(styles)(Grid类扩展React.Component {使成为 () {const {classes} = this.props;const卡= [1、2、3、4]；返回 (< div className = {classes.root}>{cards.map(c =>(<纸键= {c} className = {classes.card}>< div className = {classes.body}>< Typography variant ="subheading">测试图片</Typography>< Typography variant ="caption">小帮助文字</Typography></div>< div className = {classes.actions}><按钮>左</按钮><按钮color ="primary">右</Button></div></Paper>))}</div>)}})const theme = createMuiTheme();ReactDOM.render((< MuiThemeProvider theme = {theme}><网格/></MuiThemeProvider>)，document.querySelector(#root")) 

 < script src ="https://unpkg.com/react@latest/umd/react.development.js" crossorigin =匿名"></script>< script src ="https://unpkg.com/react-dom@latest/umd/react-dom.development.js" crossorigin ="anonymous"></script>< script src ="https://unpkg.com/@material-ui/core/umd/material-ui.development.js" crossorigin ="anonymous"</script>< script src ="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin ="anonymous"</script>< div id ="root"></div>  

这里是仅使用

flex 的卡片的示例

  .card {内边距:24px；box-shadow:0 2px 5px 0 rgba(0，0，0，.13);背景:天蓝色；border-radius:4px;字体家族:"Helvetica"，无衬线；显示:flex;flex-direction:列;高度:280px；宽度:160像素；}.card__body {显示:flex;flex:1 0自动;align-items:flex-end;证明内容:中心；}.card__actions {显示:flex;align-items:居中;证明内容:间隔；边距顶部:16像素;}  

 < div class ="card">< div class ="card__body">测试文字</div>< div class ="card__actions">< button>左</button>< button>右</button></div></div>  

I am developing an app in ReactJS and i'm using the following: MaterialUI (for react) and React Flexbox.

The problem i'm having is trying to position the card buttons on bottom (the problem that seems to have spammed the internet in different frameworks). I am using the card from here -> https://material-ui.com/demos/cards/

I've tried pretty much everything i could think of from align-items to align-self and different display types. I might be missing something here since i usually work with Bootstrap so i hope a CSS Master can help me out. I'll attach the pic below for ref.

Also for ref here's how my code looks in react( ApiPosts is my cards component) ->

                    <Grid container>
                        <Grid item xs={12}>
                            <Paper className={classes.paper}>
                                <Row className="rowSpacer">
                                    <Col xs>
                                        <Typography variant="title" align="center" color="textPrimary" gutterBottom>
                                            Posts are below
                            </Typography>
                                    </Col>
                                </Row>
                                <Divider />
                                <ApiPosts />
                            </Paper>


                        </Grid>
                    </Grid>

And finally my cards are wrapped in <Row around="xs"> (4 posts in a row) and each card in a col <Col xs >

Thanks in advance!

Edit: Solved thanks to Ivan's answer.Here's the code in case anyway needs it (working on Material-UI Cards).

.portCardCl {
    display: flex;
    flex-direction: column;
    height:100%;
}

.portBodyCl {
    display: flex;
    flex: 1 0 auto;
    align-items: flex-end;
    justify-content: center;
    flex-direction: column;
}

.portButCl{
    display: flex;
    justify-content: flex-start;
}

portCardCl goes on the first <Card>, portBodyCl goes on <CardActionArea> and finally portButCl goes on <CardActions>

解决方案

Here is example with css-grid.

const {
  Button,
  createMuiTheme,
  CssBaseline,
  MuiThemeProvider,
  Typography,
  Paper,
  withStyles,
} = window['material-ui'];

const styles = theme => ({
  root: {
    display: "grid",
    gridTemplateColumns: "repeat(4, 1fr)",
    gridGap: "24px",
  },
  
  card: {
    display: "grid",
    gridTemplateRows: "1fr auto",
    gridGap: "8px",
    minHeight: 280,
    backgroundImage: `url(https://via.placeholder.com/100x200)`,
    backgroundSize: "cover"
  },
  
  body: {
    alignSelf: "end",
    textAlign: "center"
  },
  
  actions: {
    display: "flex",
    justifyContent: "space-between"
  }
});

const Grid = withStyles(styles)(
  class Grid extends React.Component {
    render () {
      const { classes } = this.props;
      const cards = [1, 2, 3, 4];
      
      return (
        <div className={classes.root}>
          {cards.map(c => (
            <Paper key={c} className={classes.card}>
              <div className={classes.body}>
                <Typography variant="subheading">
                  Test Image
                </Typography>
                
                <Typography variant="caption">
                  Small help text
                </Typography>
              </div>
              <div className={classes.actions}>
                <Button>Left</Button>
                <Button color="primary">Right</Button>
              </div>
            </Paper>
          ))}
        </div>
      )
    }
  }
)

const theme = createMuiTheme();

ReactDOM.render((
  <MuiThemeProvider theme={theme}>
    <Grid />
  </MuiThemeProvider>
), document.querySelector("#root"))

<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/@material-ui/core/umd/material-ui.development.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>
    
    <div id="root"></div>

Here is example of card with flex using only

.card {
  padding: 24px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .13);
  background: skyblue;
  border-radius: 4px;
  font-family: "Helvetica", sans-serif;
  display: flex;
  flex-direction: column;
  height: 280px;
  width: 160px;
}

.card__body {
  display: flex;
  flex: 1 0 auto;
  align-items: flex-end;
  justify-content: center;
}

.card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}

<div class="card">
  <div class="card__body">
    Test Text
  </div>
  <div class="card__actions">
    <button>Left</button>
    <button>Right</button>
  </div>
</div>

这篇关于在底部材料界面上对齐卡片按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！