html - Bootstrap 连续添加图像拉伸(stretch) Logo ？

Question

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

这是我的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 中单击 Logo 上的检查元素后的样式属性:

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 的直接子标签，它是一个 flex 容器。因此，图像标签被拉伸(stretch)以匹配所有 sibling 的高度。

这里的简单解决方法是将两者都包装在 .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