Bootstrap flex-column
时间: 2023-08-05 08:10:28 浏览: 44
Bootstrap's `flex-column` class is used to create a flex container that arranges its child elements in a vertical column. This means that the child elements are stacked one on top of the other, from top to bottom.
To use `flex-column`, you need to add it to the parent container element. For example:
```html
<div class="d-flex flex-column">
<div class="p-2">Child Element 1</div>
<div class="p-2">Child Element 2</div>
<div class="p-2">Child Element 3</div>
</div>
```
In this example, the `d-flex` class sets the display property of the parent element to `flex`, while the `flex-column` class arranges the child elements in a vertical column.
You can also use other Bootstrap classes to control the alignment and spacing of the child elements within the column. For example:
- `align-items-center` to vertically center the child elements
- `justify-content-center` to horizontally center the child elements
- `mb-3` to add a margin-bottom of 3 units to each child element
```html
<div class="d-flex flex-column align-items-center justify-content-center">
<div class="p-2 mb-3">Child Element 1</div>
<div class="p-2 mb-3">Child Element 2</div>
<div class="p-2 mb-3">Child Element 3</div>
</div>
```