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 具有默认字体大小，但是没有办法覆盖这些值吗？我尝试添加“！重要”，但没有用。另外，我的响应式网格没有使用 Bootstrap，为什么会发生这种情况？

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

0 个答案: