Bootstrap 4 Grid Problem

Question

Ich habe einige Probleme mit dem Raster von Bootstrap 4. Ich habe einen Inhalt von col-sm-9 und eine rechte Seitenleiste von col-sm-3 float-right. Aber die Sidebar beginnt nicht von oben, sondern beginnt kurz nach dem Ende von col-sm-9. Ich möchte beide Spalten ausrichten.

Hier ist, wie die Seite es sucht: Hier können Sie den Code der Seite überprüfen können: Code

Dies ist im Grunde mein 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> 

konnte ich die Seitenleiste ausrichten auf den Inhalt, aber ich musste die Sidebar-Box vor dem Spieler bewegen, und ich möchte dieses Verhalten nicht haben.

Answer 1

Es war schwierig, mit dem von Ihnen gelieferten Link zu arbeiten, da ich bei der Ausführung des HTML-Codes nicht den gleichen Inhalt erhalten würde. Aber nachdem ich meinen eigenen Inhalt manuell eingefügt und versucht habe, neu zu erstellen, habe ich festgestellt, dass die Verwendung von bootstraps ROW auf einem Container div funktioniert hat.

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

Versuchen Sie es und lassen Sie mich wissen, wenn es funktioniert.