Layout Components (Container, Row, Col)

Layout - 图1

  1. import React from 'react';
  2. import { Container, Row, Col } from 'reactstrap';
  4. export default class Example extends React.Component {
  5.   render() {
  6.     return (
  7.       <Container>
  8.         <Row>
  9.           <Col>.col</Col>
  10.         </Row>
  11.         <Row>
  12.           <Col>.col</Col>
  13.           <Col>.col</Col>
  14.           <Col>.col</Col>
  15.           <Col>.col</Col>
  16.         </Row>
  17.         <Row>
  18.           <Col xs="3">.col-3</Col>
  19.           <Col xs="auto">.col-auto - variable width content</Col>
  20.           <Col xs="3">.col-3</Col>
  21.         </Row>
  22.         <Row>
  23.           <Col xs="6">.col-6</Col>
  24.           <Col xs="6">.col-6</Col>
  25.         </Row>
  26.         <Row>
  27.           <Col xs="6" sm="4">.col-6 .col-sm-4</Col>
  28.           <Col xs="6" sm="4">.col-6 .col-sm-4</Col>
  29.           <Col sm="4">.col-sm-4</Col>
  30.         </Row>
  31.         <Row>
  32.           <Col sm={{ size: 6, order: 2, offset: 1 }}>.col-sm-6 .order-sm-2 .offset-sm-1</Col>
  33.         </Row>
  34.         <Row>
  35.           <Col sm="12" md={{ size: 6, offset: 3 }}>.col-sm-12 .col-md-6 .offset-md-3</Col>
  36.         </Row>
  37.         <Row>
  38.           <Col sm={{ size: 'auto', offset: 1 }}>.col-sm-auto .offset-sm-1</Col>
  39.           <Col sm={{ size: 'auto', offset: 1 }}>.col-sm-auto .offset-sm-1</Col>
  40.         </Row>
  41.       </Container>
  42.     );
  43.   }
  44. }

Container Properties

  1. Container.propTypes = {
  2.   fluid:  PropTypes.bool
  3.   // applies .container-fluid class
  4. }

Row Properties

  1. Row.propTypes = {
  2.   noGutters: PropTypes.bool,
  3.   // see https://reactstrap.github.io/components/form Form Grid with Form Row
  4.   form: PropTypes.bool
  5. }

Col Properties

  1. const stringOrNumberProp = PropTypes.oneOfType([PropTypes.number, PropTypes.string]);
  2. const columnProps = PropTypes.oneOfType([
  3.   PropTypes.string,
  4.   PropTypes.number,
  5.   PropTypes.bool,
  6.   PropTypes.shape({
  7.     size: PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.string]),
  8.     // example size values:
  9.     // 12 || "12" => col-12 or col-`width`-12
  10.     // auto => col-auto or col-`width`-auto
  11.     // true => col or col-`width`
  12.     order: stringOrNumberProp,
  13.     offset: stringOrNumberProp
  14.   })
  15. ]);
  17. Col.propTypes = {
  18.   xs: columnProps,
  19.   sm: columnProps,
  20.   md: columnProps,
  21.   lg: columnProps,
  22.   xl: columnProps,
  23.   // override the predefined width (the ones above) with your own custom widths.
  24.   // see https://github.com/reactstrap/reactstrap/issues/297#issuecomment-273556116
  25.   widths: PropTypes.array,
  26. }