为什么 Bootstrap 将我的图标放在与文本不同的行中？答案

【问题标题】：Why does Bootstrap put my icon in a different line than the text?为什么 Bootstrap 将我的图标放在与文本不同的行中？
【发布时间】：2021-06-02 04:10:01
【问题描述】：

我使用 Bootstrap 创建了一个网格，但是当我尝试向列中添加一个图标时，它会出现在文本下方。哪里出错了？

我尝试使用跨度、css 内联、css 垂直对齐。我还增加了以下 col 的 col 宽度和偏移量。

The icon appears underneath the text

<div class="container border bg-light">
    <div class="container pt-2">
        <div class="row">
            <div class="col-1"><img src="profile.jpg" class="rounded-circle post-img "></div>
            <div class="col-2 col-md-1 col-sm-2 offset-sm-0 offset-1 ml-3 mt-2"><span class="font-weight-bold">Luke_KS
                </span><i class="verify fa fa-check-circle"></i></div>

            <div class="col-2 col-md-1 col-sm-2 mt-2 offset-1 offset-sm-0">
                <p class="font-weight-ligh ml-2">21.12.2020</p>
            </div>
        </div>
        <div class="row ">
            <div class="col-11 offset-1 mt-n1">
                <hr>
            </div>
        </div>
        <div class="row">
            <div class="col-9 offset-sm-1 offset-0 ml-sm-2">
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
                    labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
                    et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
            </div>
        </div>
    </div>

【问题讨论】：

标签： html css bootstrap-4 flexbox font-awesome

【解决方案1】：

图标换行，因为列中没有足够的空间。

尝试将 col-2 col-md-1 col-sm-2 更改为宽度更大的类。

或者你可以为图标添加css定位。

position: absolute;
top: 4px;
left: -2px;

【讨论】：

【解决方案2】：

试试这个

 <div class="container border bg-light">
            <div class="container pt-2">
                <div class="row">
                    <div class="col-1"><img src="profile.jpg" class="rounded-circle post-img " /></div>
                    <div class="col-2 offset-sm-0 offset-1 mt-2"><span class="font-weight-bold">Luke_KS
                     <i class="verify fa fa-check-circle ml-2"></i> </span></div>

                    <div class="col-2 col-md-1 col-sm-2 mt-2 offset-1 offset-sm-0">
                        <p class="font-weight-ligh ml-2">21.12.2020</p>
                    </div>
                </div>
                <div class="row ">
                    <div class="col-11 offset-1 mt-n1">
                        <hr />
                    </div>
                </div>
                <div class="row">
                    <div class="col-9 offset-sm-1 offset-0 ml-sm-2">
                        <p>
                            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
                            labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
                            et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                    </div>
                </div>
            </div>
        </div>

【讨论】：