Question

附上的图像显示Segment的当前状态。有没有办法让它们达到同样的高度？

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.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>
  );
}

提前致谢！

Answer 1

这里有两件事要看。首先，您需要在Grid.Row组件和Grid组件之间添加Grid.Column组件。然后你需要添加一个stretched道具。

添加：<Grid.Row stretched>

幸运的是，这种风格已经成为Semantic 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>
  );
}

语义ui反应使Segment具有相同的高度

1 个答案: