Bootstrap 4 Alpha 6 Column 占满全宽

Question

我刚刚将我的一个电子应用程序升级到 Bootstrap 的新 Alpha 6 for Bootstrap 4。他们对网格系统和 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="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's，补偿应用于列的装订线。来自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>