Bootstrap 的网格系统使用一系列容器、行和列来布局和对齐内容。它使用 Flexbox 构建，并且完全响应式。下面是一个示例以及对网格如何组合在一起的深入了解。
Flexbox 新手或不熟悉？ 阅读此 CSS Tricks Flexbox 指南 以了解背景、术语、指南和代码片段。
容器提供了一种方法来居中和水平填充网站的内容。使用 Container 来获得响应式的像素宽度。
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerExample() {
return (
<Container>
<Row>
<Col>1 of 1</Col>
</Row>
</Container>
);
}
export default ContainerExample;
流体容器
您可以使用 <Container fluid /> 来设置宽度：在所有视窗和设备尺寸上都为 100%。
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample() {
return (
<Container fluid>
<Row>
<Col>1 of 1</Col>
</Row>
</Container>
);
}
export default ContainerFluidExample;
您可以为 fluid 属性设置断点。将其设置为断点 (sm, md, lg, xl, xxl) 将在指定断点之前将 Container 设置为流体。
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidBreakpointExample() {
return (
<Container fluid="md">
<Row>
<Col>1 of 1</Col>
</Row>
</Container>
);
}
export default ContainerFluidBreakpointExample;
自动布局列
当未指定任何列宽度时，Col 组件将呈现等宽列
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function AutoLayoutExample() {
return (
<Container>
<Row>
<Col>1 of 2</Col>
<Col>2 of 2</Col>
</Row>
<Row>
<Col>1 of 3</Col>
<Col>2 of 3</Col>
<Col>3 of 3</Col>
</Row>
</Container>
);
}
export default AutoLayoutExample;
设置一个列宽度
Flexbox 网格列的自动布局还意味着您可以设置一列的宽度，并让兄弟列自动调整大小以围绕它。您可以使用预定义的网格类（如下所示）、网格混合或内联宽度。请注意，无论中间列的宽度如何，其他列都会调整大小。
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function AutoLayoutSizingExample() {
return (
<Container>
<Row>
<Col>1 of 3</Col>
<Col xs={6}>2 of 3 (wider)</Col>
<Col>3 of 3</Col>
</Row>
<Row>
<Col>1 of 3</Col>
<Col xs={5}>2 of 3 (wider)</Col>
<Col>3 of 3</Col>
</Row>
</Container>
);
}
export default AutoLayoutSizingExample;
可变宽度内容
将列值（对于任何断点大小）设置为auto，以根据其内容的自然宽度来调整列的大小。
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function AutoLayoutVariableExample() {
return (
<Container>
<Row className="justify-content-md-center">
<Col xs lg="2">
1 of 3
</Col>
<Col md="auto">Variable width content</Col>
<Col xs lg="2">
3 of 3
</Col>
</Row>
<Row>
<Col>1 of 3</Col>
<Col md="auto">Variable width content</Col>
<Col xs lg="2">
3 of 3
</Col>
</Row>
</Container>
);
}
export default AutoLayoutVariableExample;
响应式网格
Col 允许您在 6 个断点大小（xs、sm、md、lg、xl 和 xxl）中指定列宽。对于每个断点，您可以指定要跨越的列数，或者将属性设置为<Col lg={true} /> 以获得自动布局宽度。
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ResponsiveAutoExample() {
return (
<Container>
<Row>
<Col sm={8}>sm=8</Col>
<Col sm={4}>sm=4</Col>
</Row>
<Row>
<Col sm>sm=true</Col>
<Col sm>sm=true</Col>
<Col sm>sm=true</Col>
</Row>
</Container>
);
}
export default ResponsiveAutoExample;
您还可以混合匹配断点，以根据屏幕尺寸创建不同的网格。
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ResponsiveExample() {
return (
<Container>
{}
<Row>
<Col xs={12} md={8}>
xs=12 md=8
</Col>
<Col xs={6} md={4}>
xs=6 md=4
</Col>
</Row>
{}
<Row>
<Col xs={6} md={4}>
xs=6 md=4
</Col>
<Col xs={6} md={4}>
xs=6 md=4
</Col>
<Col xs={6} md={4}>
xs=6 md=4
</Col>
</Row>
{}
<Row>
<Col xs={6}>xs=6</Col>
<Col xs={6}>xs=6</Col>
</Row>
</Container>
);
}
export default ResponsiveExample;
Col 断点属性还具有更复杂的object 属性形式：{span: number, order: number, offset: number} 用于指定偏移量和排序效果。
您可以使用order 属性来控制内容的视觉顺序。
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function OrderingExample() {
return (
<Container>
<Row>
<Col xs>First, but unordered</Col>
<Col xs={{ order: 12 }}>Second, but last</Col>
<Col xs={{ order: 1 }}>Third, but second</Col>
</Row>
</Container>
);
}
export default OrderingExample;
order 属性还支持first（order: -1）和last（order: $columns+1）。
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function OrderingFirstLastExample() {
return (
<Container>
<Row>
<Col xs={{ order: 'last' }}>First, but last</Col>
<Col xs>Second, but unordered</Col>
<Col xs={{ order: 'first' }}>Third, but first</Col>
</Row>
</Container>
);
}
export default OrderingFirstLastExample;
要偏移网格列，您可以设置offset 值，或者为了更通用的布局，可以使用边距类实用程序。
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function OffsettingExample() {
return (
<Container>
<Row>
<Col md={4}>md=4</Col>
<Col md={{ span: 4, offset: 4 }}>{`md={{ span: 4, offset: 4 }}`}</Col>
</Row>
<Row>
<Col md={{ span: 3, offset: 3 }}>{`md={{ span: 3, offset: 3 }}`}</Col>
<Col md={{ span: 3, offset: 3 }}>{`md={{ span: 3, offset: 3 }}`}</Col>
</Row>
<Row>
<Col md={{ span: 6, offset: 3 }}>{`md={{ span: 6, offset: 3 }}`}</Col>
</Row>
</Container>
);
}
export default OffsettingExample;
在 Row 中设置列宽
Row 允许您在 6 个断点大小（xs、sm、md、lg、xl 和 xxl）中指定列宽。对于每个断点，您可以指定将彼此相邻的列数。您还可以指定auto 以将列设置为其自然宽度。
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function RowColLayoutExample() {
return (
<Container>
<Row xs={2} md={4} lg={6}>
<Col>1 of 2</Col>
<Col>2 of 2</Col>
</Row>
<Row xs={1} md={2}>
<Col>1 of 3</Col>
<Col>2 of 3</Col>
<Col>3 of 3</Col>
</Row>
<Row xs="auto">
<Col>1 of 3</Col>
<Col>2 of 3</Col>
<Col>3 of 3</Col>
</Row>
</Container>
);
}
export default RowColLayoutExample;
请注意，Row 列宽将在较大的屏幕上查看时覆盖在较低断点上设置的Col 宽度。<Col xs={6} /> 大小将在中等和更大的屏幕上被<Row md={4} /> 覆盖。
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function RowColLayoutColWidthBreakpointExample() {
return (
<Container>
<Row md={4}>
<Col>1 of 3</Col>
<Col xs={6}>2 of 3</Col>
<Col>3 of 3</Col>
</Row>
</Container>
);
}
export default RowColLayoutColWidthBreakpointExample;
API
Row
Col