在 bootstrap 模态内的 div 上安装 bootstrap 旋转木马

Question

我一直在尝试正确设置 css 属性以使 ng-bootstrap 轮播图像适合给定的 space (div) inside自定义 ng-bootstrap 模态。观看这个分叉的 stackblitz 代码。

如示例源中所示，图像与模态框的给定 space（高度）及其放置位置 col-8 重叠。

如何使轮播跟随其父项 col-8 的大小？以免与模态尺寸重叠。

更新

看不到问题的朋友，可以访问实际应用here

经过反复试验，我已经到了这个地步。只有 carousel-inner 及其子项不跟随其父项 div，即 ngb-carousel.carousel-modal。见下图

如上图所示，我无法使 carousel-inner 跟随其父 ngb-carousel.carousel-modal 的大小，后者已经跟随模态高度。它总是重叠并延伸超过 carousel-modal 高度。请注意，我将它们设置为 max-height:100% 以使其响应。

Answer 1

在容器内给图像一个固定的高度（也有一个固定的高度）。然后相应地放置轮播标题，如下所示：

img {
    height: 650px; /*adjust for your project*/
    width: auto !important;
}

@media only screen and (max-width:767px){
  img { width: 100% !important
   }    
} 

.carousel-caption {
    position: absolute;
    bottom: 20px;
    left: 3%; /*adjust for your project*/
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    text-align: center;
    max-width: 50%; /*adjust for your project*/
}

调整这些值直到它满足您的需要。

Answer 2

基本上，您只需要将标签层次结构中的高度降低 100%。

为了设置模态主体高度，我设置了 100% - 模态页眉高度 (69px)。

.modal-body {
    height: Calc(100% - 69px);
}

ngbd-modal-content, ngb-carousel, .carousel-inner, .modal-body .row {
  height:100%;
}

Stackblitz：https://stackblitz.com/edit/angular-csyyp8-heb7xf?file=styles.css

Answer 3

经过几个小时的理解 height、max-height 及其与其父标签的关系。我想出了解决办法。请在此处查看更新的 stackblitz。

基本上，我调整了图像的大小以适应父内容，为父内容和 img 提供了固定高度。因此，它将使图像自动调整大小以适合其父 div.

在 bootstrap 模态内的 div 上安装 bootstrap 旋转木马

Fitting ng-bootstrap carousel on div inside ng-bootstrap modal

html

css

bootstrap-4

ng-bootstrap

angular