Question

我正在尝试创建这样的布局：

大屏幕：

A1 B1      C1
-------------
A2 B2      C2

小屏幕：

A1  C1
B1
------
A2  C2
B2

（A，B，C）一起是一个列表组项目。 A应该一直走到左边，C应该一直走到与A相同的高度，如果位置上有空格，B应该紧挨着A，否则就在下面。

我尝试使用align-top和容器进行对齐，但是无法正常工作。

这是我目前的方法https://jsfiddle.net/keineahnung/wafkj29b/，但是它并不是我想要的那样。

在破坏A / B时，C向下移动一点，它不会保持与A相同的高度。

Answer 1

您可以在每个列表组项目中使用网格列。这样，您可以根据需要定位和订购商品。

<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
    <div class="row no-gutters w-100">
        <div class="col-auto pr-3">12:00 - 13:00</div>
        <div class="col-md order-last order-md-0">
            <span class="text-nowrap">
                <span class="badge-pill badge-primary text-nowrap">Tag 1</span> <span class="badge-pill badge-primary ml-2 text-nowrap">Tag 2</span>
            </span>
        </div>
        <div class="col-auto ml-auto">01:00</div>
    </div>
 </a>

https://www.codeply.com/go/rjTIU6ON98

如何对齐列表组的元素？

1 个答案: