javascript - 如何消除 Bootstrap 中列排序之间的差距
问题描述
我在侧边栏中创建了 3 张带有 2 个小部件的卡片。为了使其响应,我使用了引导程序 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>
推荐阅读
- reactjs - 反应离子点击事件
- excel - 使用 If 条件从单元格 VBA 中删除特定值时出错
- java - 使用 Netbeans 12.2。使用 GUI 设计器我创建了一个按钮。显示我创建的按钮,但是当我运行应用程序时,按钮消失了
- node.js - 无法在 NestJS 中注入 HttpConfigService
- fastapi - 如何在 FastAPI 中验证静态路由
- javascript - 如何在 for 循环中提取 JSON 文件的元素
- android - BottomNavigationView:更改标题和图标之间的间隙大小
- reactjs - 使用 Atlassian 在 TextInput 中添加一个图标
- python - 使用 list() 显式创建的列表上的错误“'NoneType' 类型的对象没有 len()”
- jenkins - 一起使用 withEnv 和 withCredentials