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

时间:2018-10-30 15:50:05

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

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

从样本源中可以看到,图像与模态以及放置其的col-8的给定空间(高度)重叠。

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

UPDATE

对于看不到问题的人,您可以访问实际的应用here

经过一番反复尝试之后,我到了这一点。仅carousel-inner及其子项不遵循其父div,即ngb-carousel.carousel-modal。看到下面的这张图片

enter image description here

如上图所示,我无法使carousel-inner遵循其父级ngb-carousel.carousel-modal的大小,而其父级carousel-modal已遵循模态高度。它始终重叠并延伸到max-height:100%高度。请注意,我将它们设置为{{1}}以使其响应。

3 个答案:

答案 0 :(得分:0)

为图像在容器内提供固定的高度(也具有固定的高度)。然后相应地放置轮播字幕,如下所示:

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

试玩直到满足您需要的值。

答案 1 :(得分:0)

基本上,您只需要将高度降低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 :(得分:0)

经过数小时的了解,heightmax-height及其与父标记的关系。我想出了解决方法。请在此处查看更新后的stackblitz

基本上,我将图像调整大小以适合父内容,从而为父内容以及img设置了固定高度。因此,它将使图像自动调整大小以适合其父div。