如何消除 Bootstrap 中列排序之间的差距

Question

我在侧边栏中创建了 3 张卡片，其中包含 2 个小部件。为了使其响应，我使用了 bootstrap 4 列排序。

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

谁能帮助我如何消除这个差距？

Codeply 链接以获得更好的响应式查看：

https://www.codeply.com/go/8cNp9dUyE5

我的代码预览如下：

.left-panel {

  background: gray;

}

.box1,

.box2,

.box3 {

  background: white;

  height: 50px;

  border: 1px solid red;

  margin-bottom: 20px;

}

.right-sidebar, .bg-pink {

  background: pink;

}

<div class="container">

    <div class="row">

        <div class="col-12 bg-pink">

            <div class="row d-md-block">

                <div class="left-panel col-md-8  order-0 float-left">

                    <div class="box1 mt-2"><p>Box 1</p></div>

                </div>

                <div class="right-sidebar col-md-4 order-3 float-left">Widget 1</div>

                <div class="right-sidebar col-md-4 order-1 float-left">

                    <p>Widget 2</p><p>Continue Widget 2</p><p>Widget 2 About to End</p><p>Widget 2 Ends</p>

                

                </div>

                <div class="left-panel col-md-8 order-3 float-left">

                    <div class="box2 mt-2 ">Box 2</div>

                </div>

                <div class="left-panel col-md-8 order-5 float-left">

                    <div class="box3 mt-2">Box 3</div>

                </div>

            </div>

        </div>

    </div>

</div>

真实例子：https : //prnt.sc/ouscan

Answer 1

我并不完全清楚您在这里尝试做什么，但简化您的课程将消除差距：<div class="container">&nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; <div class="left-panel col-md-8">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="box1 mt-2"><p>Box 1</p></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="box2 mt-2">Box 2</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="box3 mt-2">Box 3</div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="right-sidebar col-md-4">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></div>如果需要，您可以重新引入排序类，但这至少会消除差距。根据框和小部件的内容，您可能还希望在两列中包含行。编辑如果您要创建一个代表右侧栏的可重用组件，这会更简洁一些，但这里有一个选项：<div class="container">&nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; <div class="left-panel col-md-8">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="box1 mt-2"><p>Box 1</p></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="right-sidebar d-md-none">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="box2 mt-2">Box 2</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="box3 mt-2">Box 3</div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="right-sidebar d-sm-none d-md-block col-md-4">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></div>