Bootstrap 使图标跨越两行答案

【问题标题】：Boostrap Make a icon span over two rowsBootstrap 使图标跨越两行
【发布时间】：2021-08-11 22:18:04
【问题描述】：

我有这个代码：

 <div class="col-sm-3">
                <div class="card">
                    <div class="card-body">
                        <div class = "row">
                            <div class = "col-sm-6">
                                <h1 class="card-title float-left">5 l </h1>
                            </div>
                            <div class = "col-sm-6">
                                <h1> <i class="mt-1 fa fa-tint float-right" aria-hidden="true"></i></h1>
                            </div>
                        </div>
                        <p class="card-text">Ölstand in Liter   </p>   
                        
                        
                    </div>

                </div>
            </div>

看起来像这样：

我希望下降跨越“5l”和“Ölstand in Liter”。我知道我可以以某种方式创建整齐的列，但我不知道如何正确地做到这一点。

【问题讨论】：

请解释更多。
5l旁边的大水滴图标应该更大，也应该在5l下面的文字旁边

标签： bootstrap-4

【解决方案1】：

你可以试试这个：

<div class="col-sm-3">
    <div class="card">
        <div class="card-body">
            <div class="d-flex flex-row justify-content-between align-items-center">
                <div class="d-flex flex-column justify-content-around align-items-start">
                    <h1 class="card-title">5 l </h1>
                    <p class="card-text">Ölstand in Liter   </p>
                </div>
                <h1><i class="fa fa-tint pt-3" aria-hidden="true" style="font-size: 1.5em;"></i></h1>
            </div>
        </div>
    </div>
</div>

您可以通过设置字体大小来调整图标大小

【讨论】：