如何在 bootstrap 4 中创建响应式文本？

Question

任何人都可以使用 Bootstrap 帮助我处理响应式文本 4. 我到处搜索，但很奇怪，没有看到这方面的教程。如果你想指导我，这是我的代码。

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div style="font-size: 3rem;">Hello World</div>
    </div>
  </div>
</div>

Answer 1

好吧，这在 Bootstrap 4 文档的 Responsive typography 部分中有描述。来自文档：Bootstrap 不会为您执行此操作，但如果您需要，添加起来相当容易。

确实没有那么难。基本上，您必须在每个媒体断点的 <html> 标签上定义字体大小。

这是一个例子：

html { font-size: 1rem; }

@media (min-width: 576px) {
    html { font-size: 1.25rem; }
}
@media (min-width: 768px) {
    html { font-size: 1.5rem; }
}
@media (min-width: 992px) {
    html { font-size: 1.75rem; }
}
@media (min-width: 1200px) {
    html { font-size: 2rem; }
}

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1>Hello World</h1>
        </div>
    </div>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

如何在 bootstrap 4 中创建响应式文本？

How to create responsive text in bootstrap 4?

html

css

twitter-bootstrap-4