我在边栏中创建了 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
最佳答案
我不太清楚你在这里想做什么,但简化你的类将消除差距:
<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>
关于javascript - 如何消除 Bootstrap 中列排序之间的差距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57562924/