Css 语义ui使线段具有相同的高度

所附图像显示

段的当前状态。有没有办法让它们保持同样的高度


import React，{Component}来自'React'；
从“语义ui react”导入{网格、段、标题、图像、卡片、图标、按钮、分隔符、收音机、表单}；
导入“./UserAccountProfilePage.css”；
导出默认函数UserAccountProfilePage（）{
返回(
轮廓
丹尼尔
2016年加入
丹尼尔是住在纳什维尔的喜剧演员。
10个朋友
设置
同步谷歌日历
文本通知
自定义文本通知
);
}

提前谢谢
 这里有两件事要看。首先，您需要在
Grid
组件和
Grid.Column
组件之间添加一个
Grid.Row
组件。然后，您需要向其添加一个
拉伸的
道具

添加以下内容：

幸运的是，这种样式已经是语义UI CSS的一部分

import React, { Component } from 'react';
import { Grid, Segment, Header, Image, Card, Icon, Button, Divider, Radio, Form } from 'semantic-ui-react';

import './UserAccountProfilePage.css';

export default function UserAccountProfilePage() {
  return (
    <Grid columns={2} stackable className="fill-content">
      <Grid.Row stretched>
        <Grid.Column width={1} />
        <Grid.Column width={7}>
          <Segment>
            <Header as="h1">Profile</Header>
            <Image className="centered" src="/images/daniel.jpg" size="medium" circular />
            <Card fluid>
              <Card.Content>
                <Card.Header>Daniel</Card.Header>
                <Card.Meta>Joined in 2016</Card.Meta>
                <Card.Description>Daniel is a comedian living in Nashville.</Card.Description>
              </Card.Content>
              <Card.Content extra>
                <a>
                  <Icon name="user" />
                  10 Friends
                </a>
              </Card.Content>
            </Card>
          </Segment>
        </Grid.Column>
        <Grid.Column width={7}>
          <Segment>
            <Header as="h2">Settings</Header>
            <Button positive fluid>
              Sync Google Calendar
            </Button>
            <Divider />
            <Header as="h4">Text notifications</Header>

            <Radio toggle />
            <Divider />
            <Header as="h4">Customize text notifications</Header>
            <RadioExampleRadioGroup />
          </Segment>
        </Grid.Column>
        <Grid.Column width={1} />
      </Grid.Row>
    </Grid>
  );
}

import React，{Component}来自'React'；
从“语义ui react”导入{网格、段、标题、图像、卡片、图标、按钮、分隔符、收音机、表单}；
导入“./UserAccountProfilePage.css”；
导出默认函数UserAccountProfilePage（）{
返回(
轮廓
丹尼尔
2016年加入
丹尼尔是住在纳什维尔的喜剧演员。
10个朋友
设置
同步谷歌日历
文本通知
自定义文本通知
);
}
在JSX中实现这一点很有挑战性，特别是当您将它们放在单独的网格中时。相反，我会通过CSS为片段提供固定的高度。
import React, { Component } from 'react';
import { Grid, Segment, Header, Image, Card, Icon, Button, Divider, Radio, Form } from 'semantic-ui-react';

import './UserAccountProfilePage.css';

export default function UserAccountProfilePage() {
  return (
    <Grid columns={2} stackable className="fill-content">
      <Grid.Row stretched>
        <Grid.Column width={1} />
        <Grid.Column width={7}>
          <Segment>
            <Header as="h1">Profile</Header>
            <Image className="centered" src="/images/daniel.jpg" size="medium" circular />
            <Card fluid>
              <Card.Content>
                <Card.Header>Daniel</Card.Header>
                <Card.Meta>Joined in 2016</Card.Meta>
                <Card.Description>Daniel is a comedian living in Nashville.</Card.Description>
              </Card.Content>
              <Card.Content extra>
                <a>
                  <Icon name="user" />
                  10 Friends
                </a>
              </Card.Content>
            </Card>
          </Segment>
        </Grid.Column>
        <Grid.Column width={7}>
          <Segment>
            <Header as="h2">Settings</Header>
            <Button positive fluid>
              Sync Google Calendar
            </Button>
            <Divider />
            <Header as="h4">Text notifications</Header>

            <Radio toggle />
            <Divider />
            <Header as="h4">Customize text notifications</Header>
            <RadioExampleRadioGroup />
          </Segment>
        </Grid.Column>
        <Grid.Column width={1} />
      </Grid.Row>
    </Grid>
  );
}