我刚切换到Bootstrap 4,从3版本。我发现无法更改任何元素的字体大小: h1、p甚至span。
更新: 我想根据屏幕尺寸来改变字体大小,所以要使用媒体查询(Media Queries)。
我想感谢@ZimSystem指导我如何更改字体大小,但是我该如何根据不同屏幕尺寸使用媒体查询来进行改变呢?
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { h1 {
font-size: 30px;
}}
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { h1 {
font-size: 100px;
}}
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { h1 {
font-size: 150px;
} }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {
h1 {
font-size: 200px;
}
}
My HTML:
<img class="img-responsive mx-auto d-block" src="./assets/brand/cmm.png" />
<div class="row">
<div class="col-md-12 text-center">
<h1><strong>This is sample title</strong></h1>
<h2 class="text-white">South Florida's Community of Creatives Come together</h2>
</div>
</div>
这似乎也不起作用。
那么我错过了什么吗?或者在Bootstrap 4中只使用CSS无法更改字体大小或使其响应(根据屏幕大小)是不可能的吗?
h1
元素的大小。ChosenJuan,当!important
没有任何效果时,要么你的 CSS 没有被加载/应用,要么它是无效的/被文件中的某个先前错误所使无效,或者你使用了错误的选择器。仔细检查并使用不同的、更可见的属性,例如border
或background-color
进行测试。请记住,Bootstrap 不使用!important
来设置font-size
,因此!important
应该适用。这并不意味着你应该使用它。 - tao