如何仅使用 CSS 更改 Bootstrap 4 中的字体大小？

Question

我刚从 3 切换到 Bootstrap 4，我发现无法更改任何元素的字体大小：h1、p，甚至 span。

UPDATE: I want to change the size depending on the size of the screen. So using 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;
  }

 }

我的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?

更改字体大小或使其响应（取决于屏幕大小）

Answer 1

这取决于 how/where 你要改变它。它应该工作正常。确保您要添加的自定义 CSS 遵循 bootstrap.css，并且您不需要使用 !important

演示：https://www.codeply.com/go/R9dGnr6AXn

Answer 2

您可以尝试使用 vw 而不是 px。根据我的经验，px 不能很好地与字体配合使用。

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) {  h1 {
     font-size: 30vw;
   }}

 // Medium devices (tablets, 768px and up)
 @media (min-width: 768px) { h1 {
     font-size: 100vw;
   }}

 // Large devices (desktops, 992px and up)
 @media (min-width: 992px) { h1 {
     font-size: 150vw;
   } }

 // Extra large devices (large desktops, 1200px and up)
 @media (min-width: 1200px) { 
 h1 {
     font-size: 200vw;
   }

  }

Answer 3

只需扩展 bootstrap css 并进行必要的更改或覆盖您关注的选择器。无需添加 !important。

如何仅使用 CSS 更改 Bootstrap 4 中的字体大小？

How can I change the size of the font in Bootstrap 4 with just CSS?

css

font-size

twitter-bootstrap

bootstrap-4