ブートストラップ4アルファ6カラム全幅を取ります

Question

私の電子アプリケーションの1つをブートストラップ4の新しいアルファ6にアップグレードしました。グリッドシステムとフレックスボックスに多くの調整を加えました。私の電子アプリでは 現在、私はサイドバーとメインエリアを持っています。

とサイドバーは、私はそれが.COL-4 .COL-XL-3のように定義しているにもかかわらず、画面の幅全体を占有され、

そして、それは下のそれの右にすべてを押している。この現象が起こらないようにするにはどうすればよいですか？

編集：以前の問題は修正されていますが、@ haxxtronの答えでは、左側にはパディングがありません。

<div class ="row"> 
    <div class = "room-container pl-3 col-4 col-xl-3"> 
    <div class="room mt-2 col-offset-1"> 
     <h4 class = "text-muted">Room: </h4> 
     <h5 class = 'display room-name'></h5> 
     <h4 class = "text-muted">Chat Count: </h4> 
     <h5 class = 'display chat-count'></h5> 
     <h4 class = "text-muted">Username: </h4> 
     <h5 class = 'display username'></h5> 
    </div> 
    <p class = "lead footer" id="me"> { } with <img class = "heart" src="../js/img/heart.svg"> by <a href="http://siwiec.us">Adam Siwiec</a></h3> 
</div> 

<div class="right-status-container col-8 col-xl-9"> 
    <div id="avatar"></div> 
    <div id="status-container"> 
     <h4 class = "pl-1 pt-1">Status: </h4> 
     <div class = "pl-1" id = "status"> 
     </div> 
    </div> 
</div> 
</div> 

Answer 1

.rowの場合、列に適用されるガターリングを補正します。 Docs

行は、列が正しく整列されるように水平な列グループです。負のマージンの方法を.rowに設定して、すべてのコンテンツが左側に正しく配置されるようにします。

次のことを試してみてください。

JSFIDDLE

HTML

<div class="row"> 
    <div class="col-4 col-xl-3 no-gutter"> 
    LEFT 
    </div> 
    <div class="col-8 col-xl-9"> 
    RIGHT 
    </div> 
</div>