html - 如何在 bootstrap 4 中创建响应式文本?

标签 html css twitter-bootstrap-4

<分区>

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

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

最佳答案

好吧,这在 Responsive typography 中有描述。 Bootstrap 4 文档的一部分。来自文档: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"/>

关于html - 如何在 bootstrap 4 中创建响应式文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48572331/

相关文章:

html - 在 HTML 中绘制(树)图

javascript - jquery js如何删除数据然后再次添加

html - 以固定高度垂直对齐 div 中的内联 block

css - 如何调试 twitter bootstrap v4-alpha 网格? col-sm-offset-* 不起作用

php - Firefox 向多个图像中的第一个图像添加填充,尽管所有图像都具有相同的样式和大小

javascript - 双击(文档)而不是单击来关闭选择下拉列表

asp.net - 如何使用 session 变量值作为 ASP 标记中的属性值(例如 : background color)

html - 表格行中同一行的选择框和输入框

twitter-bootstrap - bootstrap 4 风格选择

twitter-bootstrap - 将 bootstrap 列包装在额外的 div 中