Question

我从Bootstrap 3升级到4并且很难复制我对Modals的定制，以便它们从右侧滑入并具有完整的高度并连接到屏幕的右侧，就像一侧面板。

使用Bootstrap 3，你可以这样做：

.modal.right .modal-dialog {
  position: fixed;
  margin: auto;
  width: 100%;
  height: 100%;
  -webkit-transform: translate3d(0%, 0, 0);
  -ms-transform: translate3d(0%, 0, 0);
  -o-transform: translate3d(0%, 0, 0);
  transform: translate3d(0%, 0, 0);
}

.modal.right.fade .modal-dialog {
  right: 0;
  -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
  -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
  -o-transition: opacity 0.3s linear, right 0.3s ease-out;
  transition: opacity 0.3s linear, right 0.3s ease-out;
}

然而，看起来BS4改变了它处理模态的方式，我无法弄清楚如何复制这个功能。

如果它有所作为，我使用ember-bootstrap和SCSS。

感谢帮助！

Answer 1

我知道这是旧的，但万一发生其他有类似问题的人。您需要使用自己的替换bootstrap的默认modal.scss。特别是＆＃34; .modal＆＃34; class会覆盖窗口中心的所有内容：

// Container that the modal scrolls within
.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: $zindex-modal;
    display: none;
 ...and so forth

那些＆＃34;左：0＆＃34;和＆＃34;右：0＆＃34;这导致一切都变得混乱。我有＆＃34; .left＆＃34;和＆＃34; .right＆＃34;返回定位的类。

所以我的modal.scss有这个：

.modal {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: $zindex-modal;
    display: none;

然后我在正确的类中处理左/右定位：

&.left.fade {
    .modal-dialog {
        left: 0;
...and so on

Bootstrap 4模态从右侧作为侧面板滑入

1 个答案: