react-bootstrap的布局

本文主要是学习react-boostrap栅格系统的一些笔记，以及代码片段, 样式的思想还是跟bootstrap一样，在react-bootstrap中将样式的用法，通过Jsx属性，做了一些更易用的输出，在此温故而知新。

Grid system文档地址：https://react-bootstrap.github.io/layout/grid/

 

Container

引入组件

import Container from 'react-bootstrap/Container'

水平居中，四周留边距的bootstrap容器

<Container className="bg-primary">empty container</Container> 

水平宽度为100%的bootstrap容器

<Container fluid className="bg-success">fluid empty container</Container>

除去已指定宽度的列，Row中的其他列均分Container剩余的宽度；将列宽设置为auto，表示该列按内容自适应

<Container>
    <Row>
        <Col>a001</Col><Col>a0