Question

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

Imgur

并且侧边栏占据了整个屏幕宽度，即使我将其定义为.col-4 .col-xl-3，

Imgur

它正在推动下方的一切。如何防止此行为发生？

编辑：更多代码，上一期已修复，但是@ 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>

Bootstrap 4 Alpha 6柱占据全宽

1 个答案: