用内联子列拆分父列宽度semanti ui react

Question

对于某些组件，我想保留一个宽度为12/16的部分，对于另一个组件，我想保持其余的4/16宽度的一个部分。

在我的12/16列中，我想另外三列将宽度平均分配在12之间。

当我这样做时，每一列都以新行结尾，而不是相邻出现，占据12列，每列4列。

import React from "react";
import ReactDOM from "react-dom";
import "semantic-ui-css/semantic.min.css";
import "./styles.css";
import { Grid } from "semantic-ui-react";
function App() {
  return (
    <Grid>
      <Grid.Column width={12}>
        I will always take up 12 columns I will always take up 12 columns I will
        always take up 12 columns I will always take up 12 columns I will always
        take up 12 columns I will always take up 12 columns
        <Grid.Column width={4}>column 1 why arent these</Grid.Column>
        <Grid.Column width={4}>column 2 columns inline</Grid.Column>
        <Grid.Column width={4}>
          column 3 and each taking up 1/3 of the 12?
        </Grid.Column>
      </Grid.Column>
      <Grid.Column width={4}>
        My four column componenet takes up four columns
      </Grid.Column>
    </Grid>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

您要做的就是将3列嵌入到另一个Grid组件中。像这样：

import React from "react";
import ReactDOM from "react-dom";
import "semantic-ui-css/semantic.min.css";
import "./styles.css";
import { Grid } from "semantic-ui-react";
function App() {
  return (
    <Grid>
      <Grid.Column width={12}>
        I will always take up 12 columns I will always take up 12 columns I will
        always take up 12 columns I will always take up 12 columns I will always
        take up 12 columns I will always take up 12 columns
        <Grid>
            <Grid.Column width={4}>column 1 why arent these</Grid.Column>
            <Grid.Column width={4}>column 2 columns inline</Grid.Column>
            <Grid.Column width={4}>
                 column 3 and each taking up 1/3 of the 12?
             </Grid.Column>
        <Grid>
      </Grid.Column>
      <Grid.Column width={4}>
        My four column componenet takes up four columns
      </Grid.Column>
    </Grid>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

在您的情况下，由于这3个Grid.Columns没有直接的Grid父级，因此它的上下文没有按比例划分给Grid Component，这就是为什么它匹配其父级的宽度而无需考虑width属性的原因。