Жидкость класса Bootstrap в реакции-начальной загрузке - PullRequest
0 голосов
/ 10 октября 2018

Я хочу добиться результатов row-fluid класса начальной загрузки с помощью реагировать-начальной загрузки , но не получил стандартного пути в библиотеке.Что-то вроде Жидкая опора для компонента Grid , но это не поддерживается для компонента Row.

Я попытался изучить документацию по адресу https://react -bootstrap.github.io / layout/ но крупной помощи не получил.

Ответы [ 2 ]

0 голосов
/ 19 октября 2018

Попробуйте это:

import React from 'react';
import { Container, Row, Col } from 'reactstrap';

export default class Example extends React.Component {
  render() {
    return (
      <Container>
        <Row>
          <Col>.col</Col>
        </Row>
        <Row>
          <Col>.col</Col>
          <Col>.col</Col>
          <Col>.col</Col>
          <Col>.col</Col>
        </Row>
        <Row>
          <Col xs="3">.col-3</Col>
          <Col xs="auto">.col-auto - variable width content</Col>
          <Col xs="3">.col-3</Col>
        </Row>
        <Row>
          <Col xs="6">.col-6</Col>
          <Col xs="6">.col-6</Col>
        </Row>
        <Row>
          <Col xs="6" sm="4">.col-6 .col-sm-4</Col>
          <Col xs="6" sm="4">.col-6 .col-sm-4</Col>
          <Col sm="4">.col-sm-4</Col>
        </Row>
        <Row>
          <Col sm={{ size: 6, order: 2, offset: 1 }}>.col-sm-6 .order-sm-2 .offset-sm-1</Col>
        </Row>
        <Row>
          <Col sm="12" md={{ size: 6, offset: 3 }}>.col-sm-12 .col-md-6 .offset-md-3</Col>
        </Row>
        <Row>
          <Col sm={{ size: 'auto', offset: 1 }}>.col-sm-auto .offset-sm-1</Col>
          <Col sm={{ size: 'auto', offset: 1 }}>.col-sm-auto .offset-sm-1</Col>
        </Row>
      </Container>
    );
  }
}

Свойства контейнера

Container.propTypes = {
    // applies .container-fluid class
  fluid:  PropTypes.bool
}

Свойства строки

Row.propTypes = {
  noGutters: PropTypes.bool,
    //Form Grid with Form Row
  form: PropTypes.bool
}

свойства Col

const stringOrNumberProp = PropTypes.oneOfType([PropTypes.number, PropTypes.string]);
const columnProps = PropTypes.oneOfType([
  PropTypes.string,
  PropTypes.number,
  PropTypes.bool,
  PropTypes.shape({
    size: PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.string]),
    // example size values:
    // 12 || "12" => col-12 or col-`width`-12
    // auto => col-auto or col-`width`-auto
    // true => col or col-`width`
    order: stringOrNumberProp,
    offset: stringOrNumberProp
  })
]);

Col.propTypes = {
  xs: columnProps,
  sm: columnProps,
  md: columnProps,
  lg: columnProps,
  xl: columnProps,
  // override the predefined width (the ones above) with your own custom widths.
  widths: PropTypes.array,
}
0 голосов
/ 10 октября 2018

Моим основным намерением было избежать отрицательных полей класса row, поэтому использование проп noGutters в качестве true каким-то образом решило мою проблему.

<Row noGutters={true}>
  ...
</Row>

Согласно документации по .no-gutters :

Желоба между столбцами в наших предопределенных классах сетки можно удалить с помощью .no-gutters,Это удаляет отрицательные поля из .row и горизонтальное заполнение из всех ближайших дочерних столбцов.

Другой вариант - использовать компонент Container с fluid prop в качестве true, если это соответствует вашим требованиям.как:

<Container fluid={true}>
  ...
</Container>
...