<分区>
任何人都可以使用 Bootstrap 4 帮助我处理响应式文本。我到处搜索,但很奇怪,没有看到这方面的教程。如果您想指导我,这是我的代码。
<div class="container">
<div class="row">
<div class="col-md-12">
<div style="font-size: 3rem;">Hello World</div>
</div>
</div>
</div>
<分区>
任何人都可以使用 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/
相关文章:
javascript - jquery js如何删除数据然后再次添加
html - 以固定高度垂直对齐 div 中的内联 block
css - 如何调试 twitter bootstrap v4-alpha 网格? col-sm-offset-* 不起作用
php - Firefox 向多个图像中的第一个图像添加填充,尽管所有图像都具有相同的样式和大小
javascript - 双击(文档)而不是单击来关闭选择下拉列表
asp.net - 如何使用 session 变量值作为 ASP 标记中的属性值(例如 : background color)