bootstrap flex-direction 水平铺开
时间: 2023-07-08 11:47:04 浏览: 142
Bootstrap 是一个流行的前端框架,它支持使用 flex 布局来构建响应式的网页布局。如果你想要水平铺开 flex 容器中的项目,可以使用 `flex-row` 类来设置`flex-direction`属性的值为`row`,它可以使 flex 容器中的项目按照横向排列,并占据整个容器的宽度。具体使用方式如下:
```html
<div class="d-flex flex-row">
<div class="p-2">项目1</div>
<div class="p-2">项目2</div>
<div class="p-2">项目3</div>
</div>
```
在上面的代码中,`d-flex` 类用于设置元素的 `display` 属性为 `flex`,`flex-row` 类用于设置元素的 `flex-direction` 属性为 `row`,`p-2` 类用于设置元素的内边距。这样,三个项目就会水平铺开,占据整个容器的宽度。
阅读全文