在 ng-bootstrap 模态中的 div 上安装 ng-bootstrap 轮播答案

【问题标题】：Fitting ng-bootstrap carousel on div inside ng-bootstrap modal在 ng-bootstrap 模态中的 div 上安装 ng-bootstrap 轮播
【发布时间】：2019-04-03 17:21:25
【问题描述】：

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

从示例源中可以看出，图像与模态框的给定空间（高度）以及放置它的col-8 重叠。

我如何使轮播遵循其父级col-8 的大小？以免与模态大小重叠。

更新

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

经过反复试验，我已经走到了这一步。只有carousel-inner 及其子项不跟随其父 div 即ngb-carousel.carousel-modal。请看下面这张图片

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

【问题讨论】：

移除模态组件中的高度样式。
不，我需要轮播来跟随模态的高度，特别是模态内的div.col-8。不是相反
你能得到你的问题的截图吗？据我所知，stackblitz 似乎正确地将轮播包含到模态。
@EricS 抱歉必须更新 css，我将其恢复。如果你仍然看不到它。请参阅上面的更新信息。

标签： html css angular bootstrap-4 ng-bootstrap

【解决方案1】：

基本上你只需要将高度降低到标签层次结构的 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

【讨论】：

这并不主要是响应式的，当您缩小或放大模式时，轮播图像标题将被隐藏。

【解决方案2】：

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

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*/
}

玩转这些值，直到它符合您的需要。

【讨论】：

试过这个，似乎使图像固定，我需要它响应并随着您的大小进行相应调整。所以大多数情况下我需要百分比的高度/宽度。但是，似乎无法使其适合其父 div carousel-inner
您需要媒体查询以适应较小设备上的 img（可能还有标题）。（更新了我的答案）

【解决方案3】：

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

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

【讨论】：