如何在引导程序中将两个 div 放在同一行

Question

我有 2 个 div。我正在使用引导程序。

我想让文本开始对齐并彼此靠近。

现在，我正在玩col-md-x但没有得到我需要的东西：

预期的：

实际的：

代码笔：

https://codepen.io/ogonzales/pen/yLLjLjr

Answer 1

在此处尝试此Jsfiddle 链接。为了解决这个问题，我只使用了三个引导类.d-flex，.align-items-center和.d-inline-block. 这不是最佳实践，在您的布局中随处应用.row和.col类。您需要了解他们的应用程序的正确位置。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex align-items-center">
            <div class="d-inline-block">
                <h2 id="product-name" class="">Stickers troquelados</h2>
            </div>
            <div class="d-inline-block">
                    <span class="">
                            <i class="gold-star fas fa-star"></i>
                            <i class="gold-star fas fa-star"></i>
                            <i class="gold-star fas fa-star"></i>
                            <i class="gold-star fas fa-star"></i>
                            <i class="gold-star fas fa-star-half-alt"></i>
                            <!-- <a class=""><i class="gold-star fas fa-star"></i></a>
                            <a class=""><i class="gold-star fas fa-star"></i></a>
                            <a class=""><i class="gold-star fas fa-star"></i></a>
                            <a class=""><i class="gold-star fas fa-star"></i></a>
                            <a class=""><i class="gold-star fas fa-star-half-alt"></i></a> -->
                            858 comentarios
                    </span>
            </div>
    </div>