如何消除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

enter image description here

Answer 1

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

<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>

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

编辑

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

<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>

Answer 2

为了实现这一点，你可能想要简化你的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>

浮动正在与bootstrap网格自动执行的操作进行斗争。

新的这可能更能满足您使用row-eq-height的需求

​

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row row-eq-height" style="background-color: blue;">
    <div class="col-md-8">
      <div class="box1 mt-2">
        <p>Box 1</p>
      </div>
    </div>
    <div class="col-md-4">
      <p>Widget 1</p>
    </div>
  </div>
  <div class="row row-eq-height" style="background-color: red;">
    <div class="col-md-8">
      <div class="box1 mt-2">
        <p>Box 2</p>
      </div>
    </div>
    <div class="col-md-4">
      <p>Widget 2</p>
      <p>Continue Widget 2</p>
      <p>Widget 2 About to End</p>
      <p>Widget 2 Ends</p>
    </div>
  </div>
  <div class="row row-eq-height" style="background-color: yellow;">
    <div class="col-md-8">
      <div class="box1 mt-2">
        <p>Box 3</p>
      </div>
    </div>
    <div class="col-md-4">
      <p>Widget 3</p>
    </div>
  </div>
</div>

​