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

Question

我刚切换到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无法更改字体大小或使其响应（根据屏幕大小）是不可能的吗？

- ChosenJuan

---

@storaged，这并不是重复的问题，因为 OP 似乎不想更改 $font-base-size，而只想更改某些 h1 元素的大小。ChosenJuan，当 !important 没有任何效果时，要么你的 CSS 没有被加载/应用，要么它是无效的/被文件中的某个先前错误所使无效，或者你使用了错误的选择器。仔细检查并使用不同的、更可见的属性，例如 border 或 background-color 进行测试。请记住，Bootstrap 不使用 !important 来设置 font-size，因此 !important 应该适用。这并不意味着你应该使用它。 - tao

@storaged，问题的标题确实具有误导性，因此是错误的，因为很多用户会来到这里寻找另一个问题的答案。如果我是你，我不会删除重复评论。对于很多未来的用户来说，这将证明是有用的。 - tao

Answer 1

这取决于您在哪里/如何进行更改。它应该可以正常工作。确保您添加的自定义CSS遵循bootstrap.css，则不需要使用！important

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

- Zim

---

谢谢您的回答，我刚刚更新了我的代码。您能否向我展示如何使用媒体查询来根据屏幕大小获得相同的结果？ - ChosenJuan

看一下其他关于媒体查询和响应式文本的问题（例如：https://stackoverflow.com/questions/45343195/change-size-of-h1-tag-when-responsive-bootstrap/45343362）。基本上，这只是将CSS包装在您想要的屏幕尺寸的媒体查询中的问题。 - Carol Skelly

你能用我的JSFiddle演示一下吗？https://jsfiddle.net/xsa8d51x/ 它似乎无法使用媒体查询。 - ChosenJuan

在CSS中不要使用//进行注释，这会破坏媒体查询。更新的codeply链接：https://www.codeply.com/go/R9dGnr6AXn - Carol Skelly

哇！谢谢你指出了这个问题！我完全忽略了注释语法。感谢你的帮助！ - ChosenJuan

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;
   }

  }

- I'm just a coder for fun

Answer 3

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

- silent_coder14