拆分父列宽度与内联子列 semanti ui 反应

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 Column 嵌入到另一个 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 组件的上下文，这就是为什么它匹配它们父级的宽度，而不考虑 width 属性.

拆分父列宽度与内联子列 semanti ui 反应

split parent columns width with inlined child columns semanti ui react

reactjs

semantic-ui

semantic-ui-react