在 Angular 5 中设置引导模式的样式答案

【问题标题】：Styling bootstrap modal in Angular 5在 Angular 5 中设置引导模式的样式
【发布时间】：2018-04-01 03:27:43
【问题描述】：

我目前正在尝试在 Angular 5 中设置引导 4 模态窗口的样式。

我已将 scss 导入到我的 global.scss 中，并且我正在为模态窗口提供 customClass，如下所示。

this.modalService.open(content, { windowClass: 'tutorial'});

到目前为止，弹出窗口显示在左下角。但是我想要实现的是像这种情况下的底部模态。

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal_bottom

但无论我做什么，我似乎都无法让它发挥作用。

我似乎无法一直拉伸模态。这是我目前的 scss

    .tutorial {
    position: fixed;
    top: auto;
    bottom: 0px;
    width: 100%;

    .modal-dialog{
        margin: 0;
        }
    }

我认为 width: 100% 会很好，但不知何故它不起作用。有什么想法吗？

【问题讨论】：

试试min-width:100%; 或width:100% !important;
好的 min-width 100% in modal-dialog 工作

标签： css sass angular2-modal

【解决方案1】：

所以执行以下操作对我有用

.tutorial-bottom {
    position: fixed;
    top: auto;
    bottom: 0px;

    .modal-dialog{
        min-width: 100%;
        margin: 0;
    }

    .modal-header {
        background: #3e8acc;
        color: white;
      }
   }

感谢@DahvalJardosh 为我指明了正确的方向

【讨论】：