Question

我正在撰写一份复读申请,其中我使用了材料证明(和诱使 alignment调和 st)。这是我的卡片法典:

<Card elevation={10} className="mb-3">
  <div className="row">
    <div className="col-md-4">
      <CardMedia
        image={
          tourspot.images.length !== 0
            ? tourspot.images[0].url
            : "/src/assets/no-image.png"
        }
        title="Tourspot Image"
        component="img"
        className="img-fluid"
      />
    </div>
    <div className="col-md-8">
      <CardContent>
        <Typography gutterBottom variant="h5" component="div">
          {tourspot.title}
        </Typography>
        <Typography component="p" className="mb-3">
          {tourspot.description}
        </Typography>
        <Typography variant="body2" color="text.secondary">
          {tourspot.location}
        </Typography>
      </CardContent>
      <CardActions>
        <Button variant="text" size="small">
          View Tourist Spot
        </Button>
      </CardActions>
    </div>
  </div>
</Card>;

However, I cannot get the text and the button to align, it looks like this currently: Card Image

任何帮助如何做到这一点?

我试图在纽芬兰和心脏行动中增加幅度,但不管我所增加多少幅度,他们都赢得了udge。

Answer 1

<代码>CardContent 构成部分pavention: 16px。 The CardActions content has patter patter: 8px。 <代码>Button 构成部分pavention: 4px 5px。

现在,你想要把卡多里特和卡多斯的婚礼结合起来。你们也必须调整对布顿的婚礼。假设你不想离开,为Button做正确的dding。您可以采取以下措施:

<CardActions
  style={{
    padding: "16px",
  }}
>
  <Button
    variant="text"
    size="small"
    style={{
      padding: "4px 0",
    }}
  >
    View Tourist Spot
  </Button>
</CardActions>

我将布顿的左侧和右侧的dding锁定到零。

如果你想要的话,你可以采取以下措施:

<CardActions
  style={{
    padding: "16px 16px 16px 11px",
  }}
>
  <Button
    variant="text"
    size="small"
  >
    View Tourist Spot
  </Button>
</CardActions>

我从心脏病中减去了5px。

友情链接