разделить родительские столбцы по ширине с вложенными дочерними столбцами. - PullRequest
Новая
       11

разделить родительские столбцы по ширине с вложенными дочерними столбцами.

0 голосов
/ 03 июля 2018

Я хочу сохранить раздел шириной 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);

Edit inlining columns and splitting the parent column

1 Ответ

0 голосов
/ 03 июля 2018

Все, что вам нужно сделать, это встроить 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);

В вашем случае, так как эти 3 столбца Grid.Column не имеют прямых родителей Grid, он не имеет контекста, делающего пропорционально пропорционально компоненту Grid, поэтому он соответствует ширине их родителя, без учета значения prop.

...