如何覆盖 Bootstrap 的默认字体大小？

Question

我使用 Bootstrap 作为下拉导航栏，之后，我设计了一个响应式两列网格。我的主要目标是，右栏必须有图片，左栏必须有响应式字体大小。

我的 HTML 代码是：

  <div class="body">
    <div class="col">
      <div class="text-responsive">
        <h4>Occupation</h3>
        <h1>N a m e</h1>
      </div>
    </div>
    <div class="col">Image will come here</div>
  </div>

我的 CSS 代码是：

.body {
  padding-top: 100px;
}

.text-responsive {
  font-size: calc(100% + 1vw + 1vh) !important;
  padding-top: 100px;
  margin-left: 50px;
  color: #1B263B;
  font-family: 'Raleway', sans-serif;
}

.body {
  display: block;
  padding: 16px;
  @media (min-width: 768px) {
    display: grid;
    grid-gap: 16px;
    grid-template-columns: 5fr 2fr;
  }
}

网格是响应式的，但我希望我的字体大小也随着我使用的设备而改变。任何帮助，将不胜感激！我知道 Bootstrap 有默认的字体大小，但有没有办法覆盖这些值？我尝试添加“！important”，但没有奏效。此外，我没有将 Bootstrap 用于我的响应式网格，为什么会发生这种情况？

Answer 1

您的选择器不针对 bootstrap 设置字体大小的元素（h1 和 h4 元素）。 下面的声明将使.text-responsive 内的所有h4s 的字体大小响应。

.text-responsive h4 {
  font-size: calc(100% + 1vw + 1vh);  
}