引导程序连续添加图像拉伸徽标？

Question

我正在尝试使用 bootstrap 4 来建立一个网站。当我尝试在标题中添加徽标图像和文本时，图像被拉伸如下：

这是我的html，

<header>
  <div class="container">
    <div class="row">
      <img alt="logo" src="img/udacity.png" id="header-logo" class="col-lg-1 col-md-1 col-sm-1 col-1 img-fluid"/>
      <h1 class="col-lg-11 col-md-11 col-sm-11 col-11" id="header-text">Text</h1>
    </div>
  </div>
</header>

我尝试在我的 css 文件中设置高度，但它不能完全设置为 Text 的高度大小，即使使用百分比也无法响应。我该如何解决这个问题？

同时，我还使用.row {border-bottom: 10px solid #000;} 设置了行边框，但没有任何显示，似乎我无法覆盖行类？

我正在使用 safari，这是我单击 safari 内徽标上的检查元素后的样式属性：

border-bottom-style: none;
border-left-style: none;
border-right-style: none;
border-top-style: none;
box-sizing: border-box;
color: rgb(33, 37, 41);
display: block;
flex-basis: 8.333333015441895%;
flex-grow: 0;
flex-shrink: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 16px;
font-weight: normal;
height: 233px;
line-height: 24px;
max-width: 8.333333015441895%;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
padding-top: 8px;
position: relative;
text-align: left;
vertical-align: middle;
width: 45px;

Answer 1

这里的问题是img 和h1 标签是.row 的直接子标签，.row 是一个弹性容器。因此，图像标签被拉伸以匹配所有兄弟姐妹的高度。

这里的简单解决方法是将两者都包装在 .col-12 中（假设您希望这对元素跨越容器的整个宽度）。

<header>
  <div class="container">
    <div class="row">
      <div class="col-1">
        <img alt="logo" src="img/udacity.png" id="header-logo" class="img-fluid"/>
        </div>
        <div class="col-11">
          <h1 id="header-text">Yutian Wu</h1>
        </div>
      </div>
    </div>
  </div>
</header>

这是一个代码笔：https://codepen.io/monners/pen/rprGpa?editors=1100