html - Bootstrap 4 网格问题

Question

我在尊重 bootstrap 4 的网格方面遇到了一些问题。我有 col-sm-9 的内容和 col-sm-3 float-right 的右侧栏。但是侧边栏并不是从顶部开始的，而是刚好在col-sm-9结束之后开始的。我想对齐两列。

页面如下所示:在这里你可以检查页面的代码:Code

这基本上是我的 html:

<section class="row clearfix" ng-cloak>
<div class="content-top no-gutters">
<div style="background-image: url({{post.better_featured_image.source_url}});" class="content-tracks-image">
</div>
    <div class="content-featured-image">
            <img>
    </div>
</div>  

<div class="clearfix"></div>

<div class="gs-track col-sm-9"><!--start player-->      
<!---player--->
</div><!-- close player -->
<div class="col-sm-9 bg-white pt-3 pb-3" ng-cloak><!-- start content-->
<!--content->
</div><!-- close content -->
<div class="col-sm-3 float-right pt-3"><!-- start sidebar -->
<!-- sidebar -->
</div><!-- close sidebar -->

</section>

我能够将边栏与内容对齐，但我必须将边栏框移动到播放器之前，我不希望出现这种情况。

Answer 1

很难使用您提供的链接，因为当我尝试运行 HTML 时，我不会得到相同的内容。但是在手动放入我自己的内容并尝试重新创建时，我发现在容器 div 上使用 Bootstrap ROW 是有效的。

<div class="row"> 
    <div class="col-sm-9">CONTENT</div>
    <div class="col-sm-3">SIDEBAR</div>
</div>

尝试一下，如果有效请告诉我。