显示-1溢出的巨无霸Bootstrap 4

编程问答 2022-06-11

问题描述

我对引导非常陌生，我正在一个网站上进行尝试。 我做了一个<div class="jumbotron>"并加入了标题。但是，标准标题看起来太小，因此我用引导程序中的display-1标题替换了它。但是，当我在电话上查看该页面时，文本溢出了超大屏幕。我不太确定为什么会这样。我可以通过缩小文本来修复它，但这在桌面上看起来很小。本质上，我想要的是使文本在台式机上看起来很大，但在移动设备上要正确设置格式。以下是一些屏幕截图：

How the sites looks normally

Smaller screen

这是我的代码： index.PHP 

<!DOCTYPE=html>
<html lang="en">
<head>
<?PHP
//require statements for data that belongs in head
require "include/head-data.html";
?>
<title>Gift Exchange</title>
</head>
<body>
<div class="container-fluid bg-dark">
    <div class="jumbotron text-danger border border-primary"><h1 class="display-1">Gift Exchange</h1></div>
    <div class="row">
    <div class="col-sm-2 pb-3 bg-secondary text-important">
    <h2><abbr>Navigation</abbr></h2>
    <div class="btn-group-vertical">
    <a href="#" class="btn btn-success border-light" role="button">Home</a>
    <a href="account_creation.PHP" class="btn btn-primary border border-light" role="button">Login / Create Account</a>
    <a href="about.PHP" class="btn btn-primary border border-light" role="button">About</a>
    <a href="help.PHP" class="btn btn-primary border border-light" role="button">Help</a>
    </div>
    </div>
    <div class="col-sm-10 bg-primary text-body">
    <h1>Welcome to Gift Exchange!</h1>
    <p>Gift Exchange is a website which allows you to connect with your friends and family. You can ask for a gift,and give others gifts. Gift exchange takes the guesswork out of giving,making sure that at the end of the day,everyone is happy. Learn more about Gift Exchange at the 'About This Site' page.</p>
    </div>
    </div>
</div>
</body>
</html>

还有我的head-data.html（通过PHP require语句包含在内）

<Meta charset="utf-8">
<Meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

我的服务器apache2，位于我的本地计算机上

我使用勇敢的浏览器

我的操作系统是Ubuntu 20.04

所包含的“较小的屏幕”屏幕截图是使用开发工具拍摄的，但是当我在实际的手机上查看该问题时，问题似乎相同。

提前谢谢

解决方法

创建一个类，并在其中添加自定义CSS，然后定义要应用的字体大小。然后使用引导媒体资源，只需添加您刚刚在媒体查询中创建的上一个类，然后将其字体大小更改为所需的值，即可使其在每个设备上都具有响应能力。示例在下面... 

.custom-heading{ font-size:2rem; }

然后创建媒体查询/ *小型设备（横向手机，576像素及以上）* / 

@media (min-width: 576px) { .custom-heading{ font-size:1rem; } }

也在下面共享参考链接。

bootstrap media queries

,

删除类display-1并将CSS添加到该html，就像这样

<h1 style="font-size: 300%;">Gift Exchange</h1>

根据要求调整百分比。

尺寸以百分比表示，因为尺寸会随着屏幕宽度而变化

,

如果您使用的是Bootstrap Sass，则可以通过将$enable-responsive-font-sizes Sass变量更改为true来启用Responsive Font Sizes功能。

您可以在https://project-rfs.github.io/docs/4.3/content/typography/#display-headings

上启用“响应字体大小”功能，然后查看演示标题的显示示例。
bootstrap-4