我刚刚将我的一个电子应用程序升级到Bootstrap 4的新Alpha 6。他们对网格系统和flexbox做了很多调整，这反过来又给了我一些不稳定的错误。目前我有一个侧栏和一个主区域。

并且边栏占据了屏幕的整个宽度，尽管我将其定义为.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="https://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>