html - 引导程序 4 中的完整空间图像
问题描述
我想要这样的横幅:
在手机显示时
当它显示在桌面时
为此,我尝试了:
.card-body {
display: flex;
}
@media(min-width:768px) {
.card-title {
font-size: 3vw;
word-break: break-all;
}
}
@media(max-width:767px) {
.card-title {
font-size: 8.5vw;
word-break: break-all;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="shadow card col-md-3 ml-4 mt-3 mb-3 mr-4" style="background-color: #F0E78C">
<div class="row">
<div class="card-body col-12 border p-0">
<img src="https://i.imgur.com/ZyROdEa.png" width="90">
<h5 class="card-title float-right">9999999999</h5>
</div>
<div class="card-body col-12 border p-0">
<a href="" class="btn btn-block" style="background-color: #00BFFF; color: white;">Get Details</a>
</div>
</div>
</div>
但在上面的代码中,文本左对齐,但我使用的是float-right。
解决方案
您可以通过现有的 bootstrap-4 类更改来实现这一点
将 ml-4 更改为 ml-sm-4 并将新类 ml-auto 添加到 card-title div
<div class="shadow card col-md-3 ml-sm-4 mt-3 mb-3 mr-4" style="background-color: #F0E78C">
<div class="row">
<div class="card-body col-12 border p-0">
<img src="https://i.imgur.com/ZyROdEa.png" width="90">
<h5 class="card-title ml-auto">9999999999</h5>
</div>
<div class="card-body col-12 border p-0">
<a href="" class="btn btn-block" style="background-color: #00BFFF; color: white;">Get Details</a>
</div>
</div>
</div>
推荐阅读
- javascript - 使用 JS/jQuery 动态更改内联文本的 css 颜色
- asp.net - 无法在 VB.NET ASPX 文件中使用 LINQ,即使我导入 System.Linq
- elasticsearch - 每个数据点上带有超链接的 vega-lite 散点图未单击
- c# - 从 MongoDB 中的子对象获取字段
- python-3.x - 如何在 cog 文件中实现 reset_cooldown?
- vue.js - 同步两个 q-card 之间的过渡效果
- python - 临时命令 discord.py
- python - 写入 H5 文件时“无法广播 (37,) -> (37, 2)”
- python - 保存带有数字参数值的 csv 文件
- pandas - 将熊猫时间列转换为日期时间列