javascript - 反应,无法使用引导程序使行响应
问题描述
我有一行是列的集合,它在宽屏中正确显示,但在移动屏幕上出现问题,我尝试了 col-sm- 但它没有用。请帮我解决这个问题
您是否可以在上图中看到,同一行中的所有元素,但是当切换到移动设备时,元素分为 2 行MobileView。我希望该行在一行中自行调整
我的代码
<div className="row leaderBoard_main p-2 m-3">
<div className="col-1 leaderBoard_1">
<h4>1</h4>
</div>
<div className="col-1 leaderBoard_2">
<img className = "leadBoard_22" src="account.png" />
</div>
<div className="col-8 leaderBoard_3">
<h4 className="">Username</h4>
</div>
<div className="col-2 leaderBoard_4">
<h4>10 Points</h4>
</div>
</div>
CSS 代码
.leaderBoard_main {
background-color:#0092FF;
border-radius: 10px;
}
.leaderBoard_1 {
color: white;
border-right: 5px solid white;
}
.leaderBoard_2 {
color: white;
}
.leaderBoard_22 {
width: 25px;
height: 25px;
}
.leaderBoard_3 {
color: white;
}
.leaderBoard_4 {
color: white;
border-left: 5px solid white;
}
解决方案
问题是行类添加的额外边距。尝试将“no-gutters”类添加到行中:
<div class="row no-gutters leaderBoard_main p-2 m-3">
</div>
要使文本垂直居中,请将类 d-flex 和 align-items-center 添加到它们的容器中,例如:
<div class="col-1 leaderBoard_1 d-flex align-items-center">
<h4>1</h4>
</div>
(对于具有类 leaderBoard_2 和 3 的 div 也是如此)
推荐阅读
- python - django 计算中的 0.01 差异
- c++ - 为私有结构定义两个参数的运算符重载
- kubernetes - Openshift origin oc cluster up 失败
- r - Replace for-loop by function
- partitioning - 在 Autosar 中,我们如何决定哪些 SWC/BSW 应该转到受信任的 OS 应用程序,哪些 SWC/BSW 应该转到非受信任的 OS 应用程序?
- java - 用实际的 Controller 替换 Mocked Spring Boot Controller
- android - 多风格库:“必需的 org.gradle.usage 'java-api' 并发现不兼容的值 'java-runtime'”
- nuxeo - 如何在 nuxeo 平台中限制上传的文件类型
- c# - Modbus TCP 主到多个从连接
- javascript - How to make koa ctx.throw() use application/json rather than text/plain