Reactjs 拆分父列宽度和内联子列语义ui react

我想为某些组件保留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);

从“React”导入React；
从“react dom”导入react dom；
导入“语义ui css/semantic.min.css”；
导入“/styles.css”；
从“语义ui react”导入{Grid}；
函数App（）{
返回(
我会一直占据12个专栏我会一直占据12个专栏
总是占12栏我总是占12栏我总是
占12栏我会一直占12栏
第1栏为什么不是这些
列2内联列
第3列，每列占12列的1/3？
我的四列组件占据了四列
);
}
const rootElement=document.getElementById（“根”）；
ReactDOM.render（
您所要做的就是将3列嵌入另一个网格组件中。如下所示：

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

从“React”导入React；
从“react dom”导入react dom；
导入“语义ui css/semantic.min.css”；
导入“/styles.css”；
从“语义ui react”导入{Grid}；
函数App（）{
返回(
我会一直占据12个专栏我会一直占据12个专栏
总是占12栏我总是占12栏我总是
占12栏我会一直占12栏
第1栏为什么不是这些
列2内联列
第3列，每列占12列的1/3？
我的四列组件占据了四列
);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

在您的例子中，由于这3个Grid.Columns没有直接的网格父级，它没有上下文，因此它与网格组件成比例地分割，这就是为什么它匹配其父级的宽度，而不考虑宽度属性