Javascript 如何消除Bootstrap中列顺序之间的间隙

我已经在侧边栏中创建了3张带有2个小部件的卡片。为了使它具有响应性，我使用了bootstrap 4列排序

现在我面临的问题是，如果我在一行中有两列，右列比左列大，它会显示卡1和卡2之间的空间，因为卡1比小部件1或2小

有人能帮我消除这个差距吗

Codeply链接可实现更好的响应性查看：

我的代码预览如下：

。左面板{
背景：灰色；
}
.box1，
.box2，
.box3{
背景：白色；
高度：50px；
边框：1px纯红；
边缘底部：20px；
}
.右侧边栏，.bg粉红色{
背景：粉红色；
}

方框1

小部件1
小部件2
继续小部件2
小部件2即将结束
小部件2结束

方框2
方框3

要实现这一点，您可能需要简化html并像这样包装元素：

<div class="container">
    <div class="row">
        <div class="col-md-8">
            BOXES GO HERE
        </div>
        <div class="col-md-4">
            SIDEBAR GOES HERE
        </div>
    </div>
</div>

---

我并不完全清楚您在这里想做什么，但简化您的课程将消除这一差距：

<div class="container">
    <div class="row">
        <div class="left-panel col-md-8">
            <div class="box1 mt-2"><p>Box 1</p></div>
            <div class="box2 mt-2">Box 2</div>
            <div class="box3 mt-2">Box 3</div>
        </div>
        <div class="right-sidebar col-md-4">
            <p>Widget 1</p><p>Widget 2</p><p>Continue Widget 2</p><p>Widget 2 About to End</p><p>Widget 2 Ends</p>
        </div>
    </div>
</div>

方框1

方框2
方框3
小部件1
小部件2
继续小部件2
小部件2即将结束
小部件2结束

如果需要，可以重新引入ordering类，但这至少可以消除这个差距。根据框和小部件的内容，您可能还希望在两列中包含行

编辑

如果您要创建一个表示右侧栏的可重用组件，这会更简洁一些，但这里有一个选项：

<div class="container">
    <div class="row">
        <div class="left-panel col-md-8">
            <div class="box1 mt-2"><p>Box 1</p></div>
            <div class="right-sidebar d-md-none">
                <p>Widget 1</p><p>Widget 2</p><p>Continue Widget 2</p><p>Widget 2 About to End</p><p>Widget 2 Ends</p>
            </div>
            <div class="box2 mt-2">Box 2</div>
            <div class="box3 mt-2">Box 3</div>
        </div>
        <div class="right-sidebar d-sm-none d-md-block col-md-4">
            <p>Widget 1</p><p>Widget 2</p><p>Continue Widget 2</p><p>Widget 2 About to End</p><p>Widget 2 Ends</p>
        </div>
    </div>
</div>

方框1

小部件1
小部件2
继续小部件2
小部件2即将结束
小部件2结束

方框2
方框3
小部件1
小部件2
继续小部件2
小部件2即将结束
小部件2结束

如果我遵循您的模式，我将如何在较小的设备上订购？根据您的建议，如果我在一列中有框，在另一列中有侧边栏，那么我将如何在移动设备中的框1和框2之间输入侧边栏1卡？再试一次，您可以匹配行的高度您也可以将右侧侧边栏放在其中两次，并使用断点显示/隐藏它们（不在移动设备中时，隐藏框1和框2之间的一个，在移动设备上显示）。可能不是最好的解决方案，但它会再次给我一个空白。这里有一个预览：这是一个丑陋的设计。是的，你不会阻止。如果是这样的话，你可能需要重新考虑布局和网页设计。嘿@schuno，你能试着为我重新排序一件事吗？我想要“小部件1”在移动设备中出现在框1和框2之间。@RamboRon请参见上面使用Display的选项，但这复制了代码。使用引导排序的原因是我不想复制代码。我不确定您是否可以使用引导网格完成此操作。正如我在回答中提到的，如果您为“右侧边栏”我不认为两次包含该组件会太麻烦。我不能这样做，这就是为什么我使用引导排序而不是可重用组件。