Как изменить ширину столбца в зависимости от количества имеющихся столбцов?

Question

Возьмем следующий пример реакционной ленты:

       <Container fluid>
        <Row>
          <Col md={4}>
            <TodoAdd />
          </Col>
          <Col md={8}>
            <TodoList />
          </Col>
        </Row>
      </Container>

Иногда второй столбец отсутствует в DOM.Когда это происходит, я бы хотел, чтобы свойство 'md' в первом столбце было {12}.

Иными словами, я бы хотел, чтобы столбцы были текучими, т. Е. Занимали всю ширину строки, когда столбцов-братьев нет.

Answer 1

Вы можете сделать это так:

  <Container fluid>
    <Row>
      <Col>
        <TodoAdd />
      </Col>
      <Col md={8}>
        <TodoList />
      </Col>
    </Row>
  </Container>

Первый столбец будет занимать столько места, сколько осталось другим столбцам, размер которых указан (через md, sm и т. Д.)