bootstrap连续添加图像拉伸徽标？

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文件中设置高度，但不能将其设置为文本的高度大小，并且即使使用百分比也无法响应。我该如何解决这个问题？

与此同时，我还使用.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的直接子标记，它是一个弹性容器。因此，图像标签被拉伸以匹配所有兄弟姐妹的高度。

这里的简单修复是将两者都包装在.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>

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