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

Question

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

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

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>

Answer 1

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

尝试把col-2col-md-1col-sm-2改成类，宽度再大一些。

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

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

Answer 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>

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

Why does Bootstrap put my icon in a different line than the text?

html

css

flexbox

font-awesome

bootstrap-4