我正在尝试制作一个显示标题，标题的左边和右边都有一个图像。 它在LG显示时工作得很好，但是当我使显示更小时，标题文本似乎溢出了右边的列，使它变得不对称。 我希望图像和文字留即使与较小的屏幕。 我是不是把网格系统搞错了？
null
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>farfetch'd | Official Website ‐</title>
<!--CSS -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link href="https://fonts.googleapis.com/css2?family=Archivo&display=swap" rel="stylesheet">
<link rel="stylesheet" href="CSS/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- favicon -->
<link rel="icon" href="Images\Logo-feather-without-stroke.png">
</head>
<body>
<body>
<div class="container">
<div class="row">
<div class="col">
<img class="float-right" src="https://placekitten.com/100/100" alt="feather" style="width:100px">
</div>
<div class="col">
<h1 class="display-4 text-center">farfetch'd</h1>
</div>
<div class="col">
<img src="https://placekitten.com/100/100" alt="feather" style="width:100px">
</div>
</div>
</div>
</body>null
我假设您希望文本始终位于div中间，实现这一点的一种方法是使用vw作为长度，而不是使用rem
雷姆:
表示根元素的font-size（通常为)。 当在根元素font-size中使用时，它表示其初始值（常见的浏览器默认值是16px，但用户定义的首选项可能会修改此值）。
大众:
等于视口初始包含块宽度的1%。
有关此信息的详细信息，请检查长度。
最终结果为:
null
.heading {
font-size: 5vw;
}<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>farfetch'd | Official Website ‐</title>
<!--CSS -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link href="https://fonts.googleapis.com/css2?family=Archivo&display=swap" rel="stylesheet">
<link rel="stylesheet" href="CSS/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- favicon -->
<link rel="icon" href="Images\Logo-feather-without-stroke.png">
</head>
<body>
<body>
<div class="container">
<div class="row">
<div class="col">
<img class="float-right" src="https://placekitten.com/100/100" alt="feather" style="width:100px">
</div>
<div class="col">
<h1 class="heading text-center">farfetch'd</h1>
</div>
<div class="col">
<img src="https://placekitten.com/100/100" alt="feather" style="width:100px">
</div>
</div>
</div>
</body>
我认为这是h1标记的默认行为您可以在css中使用overflow-wrapoverflow等更改此行为
