使用 CSS Bootstrap 在标题旁边放一个徽标？

Question

我正在尝试使用 Bootstrap 将我的徽标放在我的网站名称旁边。我正在尝试使用 Bootstrap，因为我希望它随着网页大小的变化而缩放，但我不知道如何正确地做到这一点。我是 Bootstrap 的新手，所以这可能是一个简单的解决方法。

我正在尝试使我的网站看起来像这样：

查看网页顶部 NOMAD RIDES 旁边的马徽标图片。这是我当前的html：

<div id="container-fluid">
    <div class="row justify-content-center" id="headerDiv">
         <h1 class="col-4 align-middle">Nomad Rides</h1>
         <img class="img-fluid col-2 align-middle" src="logo.png">
    </div>         
</div>

在某些屏幕尺寸上看起来不错。但是，我想设置徽标和标题的最大尺寸。因此，一旦它达到最小 500 像素的屏幕尺寸（即当有人在大桌面屏幕上查看它时），文本和图像的大小应该停止增长。我知道媒体查询可能是这样做的方法，但我似乎无法弄清楚。

Answer 1

您可以简单地将<img> 放在<h1> 中：

<div id="container-fluid">
    <div class="row justify-content-center" id="headerDiv">
         <h1 class="col-4 align-middle"><img class="img-fluid col-2 align-middle" src="logo.png">Nomad Rides</h1>
    </div>         
</div>