bootstrap-4 - 如何在 Bootstrap 4 中减小小屏幕中的图标大小
问题描述
如何在引导程序中减小小屏幕中的图标大小 4. 我正在开发引导程序,我的目标是在小屏幕中减小引导程序中的图标大小。例如,现在我的屏幕尺寸是 Mobile S-320 PX,这里我需要减小图标尺寸。请帮我解决这个问题。如果我不清楚我的疑问,请发表评论。
这是 Regform.js
import React, { Component } from 'react';
import './Regform.css';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSuitcase } from '@fortawesome/free-solid-svg-icons';
class Regform extends Component {
render() {
return (
<div className='container-fluid customcolor'>
<div className='row'>
<div className='col-12'>
<div className='Main'>
<div className='icon'>
<FontAwesomeIcon className='suitcasestyle fa-5x' icon={faSuitcase}></FontAwesomeIcon>
</div>
<div className='content'>
<h1>Job Application</h1>
<h3>Please complete the form below to apply for a position with us.</h3>
</div>
<div className='Mainform'>
<form>
</form>
</div>
</div>
</div>
</div>
</div>
)
}
}
export default Regform
这是 Regform.css
.Main {
display: flex;
padding-top: 2%;
padding-bottom: 2%;
}
.customcolor {
background-color: #ff3f00
}
.suitcasestyle {
color: white;
}
.content {
padding-left: 10px;
}
.content h1, h3 {
color: white;
}
解决方案
如字体真棒文档中所述..
“图标继承其父容器的字体大小,这允许它们匹配您可能与它们一起使用的任何文本。通过以下类,我们可以相对于继承的字体大小增加或减少图标的大小。”
因此,只需使用@media 查询响应式地缩小移动设备上的 .icon 字体大小。
@media (max-width: 320px) {
.icon {
font-size: .5rem;
}
}
推荐阅读
- r - R中的行值到列
- python - 如何从 python 中的图像(或 pdf 文件)中提取名称和手写数字?
- javascript - HTML日期字段指示器上的绑定事件以编程方式关闭内置日期选择器弹出窗口
- php - 使用 cronjob 运行需要时间来获得结果的页面
- shell - 变量 $? 不适用于 mksh 上的 $PS1
- excel - 从工作簿中查找数据,对其进行编辑并再次发送 - VBA Userform
- javascript - 替换标签内 HTML 字符串中的颜色字符串
- css - 想要在 .net 项目中修复我的 .cshtml 中的 CSS 和引导程序问题
- java - 尝试打开 MainActivity 时出现奇怪的错误代码
- asp.net - 在项目中发布或更新单个 DLL - 安全吗?