如何在语义反应 UI 网格中添加元素？

Question

我正在使用 React 语义 UI。我想在网格系统中添加一个搜索栏。搜索栏应该占据几乎整个宽度（参见屏幕截图 2）。

搜索栏应该与现有的边栏相邻。目前，我可以在侧边栏旁边添加搜索栏，但侧边栏的宽度没有增加，为什么会这样？我希望搜索栏具有全宽，即直到屏幕右侧的末尾。

代码：

export default class DashBoard extends Component {

  render() {

    return (
      <div className={styles.container}>
        <Grid stackable columns={3}>
        <Grid.Row>
          <Grid.Column className={styles.sideBar} width={3}>
            <Segment className={styles.sideBarContent}>
                <Header as='h3' className={styles.sideBarHeader}>DashBoard</Header>
                <Header as='h3' className={styles.sideBarHeader}>Donations</Header>
                <Header as='h3' className={styles.sideBarHeader}>Events</Header>
                <Header as='h3' className={styles.sideBarHeader}>Reports</Header>
                <Header as='h3' className={styles.sideBarHeader}>Profile</Header>
                <Header as='h3' className={styles.sideBarHeader}>Donor Intelligence</Header>
            </Segment>
          </Grid.Column>
          <Grid.Column width={5}>
            <div className={styles.searchBar}>
               <Search size='big'/>
            </div>
            <Segment className={styles.piechartContent}>
              <PieChart width={250} height={300}/>
            </Segment>
            <Segment className={styles.multilinechartContent}>
              <MultilineChart width={350} height={325}/>
            </Segment>
          </Grid.Column>
          <Grid.Column width={5}>
            <Segment className={styles.barchartContent}>
              <BarChart width={475} height={375}/>
            </Segment>
            <Segment className={styles.donutchartContent}>
              <DonutChart width={375} height={325}/>
            </Segment>
          </Grid.Column>
          <Grid.Column width={2}>
            <Card className={styles.card1}>
              <Card.Content>
                <Card.Header className={styles.cardHeader1}>£93,300.56</Card.Header>
                <Card.Description className={styles.cardDescription1}>Remittances - All Time</Card.Description>
              </Card.Content>
            </Card>
            <Card className={styles.card2}>
              <Card.Content>
                <Card.Header className={styles.cardHeader2}>53</Card.Header>
                <Card.Description className={styles.cardDescription2}>Parishes / Churches</Card.Description>
              </Card.Content>
            </Card>
          </Grid.Column>
        </Grid.Row>
      </Grid>
    </div>
    )
  }
}

截图：

截图一：

Answer 1

您需要两列，并且在主列内您需要两行。（如果包装得当，您可能不需要两个实际的行元素，但使用行可能有助于使结构更清晰。）

 _______________________________
|         | ___________________ |
|         || row w/ 1 col      ||
|         ||___________________||
|         | ___________________ |
|         ||         ||        ||
|         || row w/  ||        ||
|         || 2 cols  ||        ||
|         ||         ||        ||
|         ||         ||        ||
|         ||_________||________||
 _______________________________
    ^-- sidebar col
                     ^-- main col

如何在语义反应 UI 网格中添加元素？

How to add elements in a Semantic React UI grid?

html

reactjs

semantic-ui-react