css - 引导列未正确排列。为什么？

Question

我试图让两列彼此相邻，但无论我尝试什么，它们都保持在彼此之上。

我的代码是这样的：

<div class="container">
<div class="row">
    <div class="col-sm-12">
        <div class="row">
            <div class="recept-data">
                <div class="col-sm-6 ingredients">
                    <div class="fields-heading">
                        <i class="fa fa-shopping-basket">
                        </i>
                        <strong>Ingrediënten:</strong>
                    </div>                  
                    <div class="datalist">
                    {@onderdelen}
                    </div>
                </div>

                <div class="col-sm-6">
                    <div class="fields-heading">
                        <i class="fa fa-clock-o"></i>
                        <strong>Voorbereidingstijd:</strong>
                    </div>
                    <div class="datalist">
                        {@voorbereidingstijd}
                    </div>

                    <div class="fields-heading">
                        <i class="fa fa-clock-o"></i>
                        <strong>Bereidingstijd:</strong>
                    </div>
                    <div class="datalist">
                        {@bereidingstijd}
                    </div>  
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<hr>

<div class="fields-heading">
<i class="fa fa-file-o"></i>
<strong>Bereidingswijze:</strong>
</div>

据我所知，引导程序已加载。我确实在我的页面源代码中看到了它。

Hier 我尝试实现的屏幕截图：

这就是我到目前为止得到的：

有任何想法吗？

标签： cssbootstrap-4