Question

我遇到以下问题，我无法通过引导网格系统进行修复。引导程序版本为v4.5.2

我正在一个可以正常工作的容器流体上设置max-height（50vh）。然后，我向包含2列的容器中添加一行，但是我的图像似乎无法正确调整大小，因为该行只是超出了其父容器的最大高度，并调整为图像高度。

下面您将看到开发工具图像。我尝试使用“ img-fluid”类，但是它对我的图像没有任何影响。

This is the child-row that exceeds the container's max-height

我要去哪里错了？这是我的代码。

HTML

<div class="container-fluid view ">
    <div class="row h-100 d-flex align-items-center no-gutters">
        <div class="col-md-6 pl-5">
            <h1>Just a simple Heading that should align in the middle</h1>
        </div>
         <div class="col-md-6 d-flex align-items-center img-fluid flex-nowrap overflow-hidden heroImages">
                <img class="img-fluid" src="https://picsum.photos/600">
                <img src="https://picsum.photos/600">
        </div>
    </div>

CSS

html,header{
  height: 100%!important;
  width: 100% !important;
  margin-top: 0 !important;
  padding: 0 !important;
  color:black;
}

.view {
  max-height: 300px;
 /* max-height: 50vh; */
}

body {
  height: 100% !important;
  padding-top: 55px !important;
  background-color: rgba(255, 255, 255, 0.84) !important;
}

Answer 1

尝试将其添加到上面的代码中

.heroImages{
   height: 300px;
   display:flex;
  }
.heroImages img{
  display:block;
  height:100%;
  }

父div需要定义高度，并且该div中的图像需要显示为块。

引导行超过了容器流体的最大高度

1 个答案: