Question

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

更新：我想根据屏幕大小更改大小。所以使用媒体查询。

我要感谢@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>

这似乎也不起作用。

我错过了什么？或者是否无法改变字体大小或仅使用CSS在Bootstrap 4中对其进行响应（取决于屏幕大小）？

Answer 1

取决于您改变它的方式/地点。它应该工作正常。确保您添加的自定义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中的字体大小？

3 个答案: