Question

我想通过使用react-bootstrap来获得row-fluid引导类的结果，但是在库中没有标准方法。类似于fluid prop for Grid组件，但Row组件不支持。

我尝试浏览https://react-bootstrap.github.io/layout/上的文档，但没有得到任何重要帮助。

Answer 1

尝试一下：

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
}

颜色属性

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,
}

Answer 2

我的主要目的是避免row类的负边距，因此将prop noGutters作为true使用以某种方式解决了我的问题。

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

根据documentation of .no-gutters：

我们预定义的网格类中各列之间的装订线可以是用.no-gutters删除。这将消除.row中的负边距以及所有直接子级列的水平填充。

另一种方法是，如果满足以下要求，则将Container的{{1}}组件与fluid一起使用，

true

react-bootstrap中的Bootstrap类行流体

2 个答案: