在Bootstrap 5.0中使用Response重新排序div

2022-08-26 00:00:00 html css bootstrap-5

我在使用Bootstrap V5.0进行网页设计时遇到了一个问题。 特别是,我有3个div A,B,C,我希望他们响应地重新排序,如下图所示。A是h2+p,B是2个按钮,C是图像。

我的第一种方法是将A和B分组为一组LG-6,将C分组为另一组LG-6,但这种方法是不合适的,因为代码必须遵循A-C-B的顺序才能拥有图片中的移动视图。

我在StackOverflow上搜索并尝试了多次关于这个问题的帖子,但解决方案都在Twitter Bootstrap 3或Bootstrap 4(使用Push/Pull类)中。一些答案说,在Bootstrap 5.0中,我们使用-Order来解决这样的问题。但我尝试了,但失败了,看完文档后,我真的不明白-Order是如何工作的。

那么,谁能帮我解决这个问题呢?非常感谢!


解决方案

最简单的方法是在允许浮点数工作的特定断点上禁用&q;Flexbox。这可以使用所有Bootstrap 5类来完成,因此没有额外的css...

<div class="container">
    <div class="row g-3 d-flex d-md-block">
        <div class="col-md-6 float-start">
            <div class="card card-body">A</div>
        </div>
        <div class="col-md-6 float-end">
            <div class="card card-body tall">C</div>
        </div>
        <div class="col-md-6 float-start">
            <div class="card card-body">B</div>
        </div>
    </div>
</div>

Floats in Bootstrap 5 demo

或者,您可以使用Bootstrap 5中的新的css网格类。但是,这需要您$enable-cssgrid使用sass:

<div class="container">
    <div class="grid">
        <div class="g-col-md-6 g-col-12">
            <div class="card card-body">A</div>
        </div>
        <div class="g-col-md-6 g-col-12" style="grid-row: span 2;">
            <div class="card card-body tall">C</div>
        </div>
        <div class="g-col-md-6 g-col-12">
            <div class="card card-body">B</div>
        </div>
    </div>
</div>

CSS grid demo


相关:Bootstrap with different order on mobile version

相关文章