2 个具有最大宽度和最大高度的引导模式答案

【问题标题】：2 bootstrap modals with max-width and max-height2 个具有最大宽度和最大高度的引导模式
【发布时间】：2016-04-05 20:54:41
【问题描述】：

我想在引导主题网页中创建 2 个模式。

我已经完成了更广泛的模式的创建。

这是代码，

.modal-dialog {
    width: auto;
    height: auto;
    position: fixed;
    top: 10px;
    left: 10px;
    bottom: 10px;
    right: 10px;
    max-width:900px;
}

使用此代码的更广泛模式的输出是我所期望的。

但现在的问题是更小的模态。

较小的模态应该是响应式的。它的最大宽度为 360 像素，最大高度为 340 像素。

我应该为较小的模态更改 .modal-dialog css 吗？

【问题讨论】：

你能在某处分享你到目前为止编写的全部代码吗？
我的问题中的 css 是唯一与模态大小相关的。
我尝试将 top:10px 更改为 auto。和底部：10px 自动。然后添加最大高度：340px。但它不起作用

标签： html css twitter-bootstrap

【解决方案1】：

您可能想要创建默认模式的新变体以适应不同的大小和行为：

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myWiderModalLabel">
  <div class="modal-dialog modal-wider">
    <div class="modal-content">
      <div class="modal-body> ... </div>

    </div>
  </div>
</div>

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallerModalLabel">
  <div class="modal-dialog modal-smaller">
    <div class="modal-content">
      <div class="modal-body> ... </div>

    </div>
  </div>
</div>

.modal-dialog {
  &.modal-wider {
    width: auto;
    height: auto;
    position: fixed;
    top: 10px;
    left: 10px;
    bottom: 10px;
    right: 10px;
    max-width: 900px;
  }

  &.modal-smaller {
    width: auto;
    height: auto;
    position: fixed;
    top: 10px;
    left: 10px;
    bottom: 10px;
    right: 10px;
    max-width:360px;

    .modal-body {
        max-height: 340px;
        overflow-x: hidden;
        overflow-y: scroll;
    }
  }
}

【讨论】：

我使用了您的代码，但问题是，较小的模态不在中心，并且高度超过 340 像素。
如果你需要垂直居中一个盒子，你必须求助于著名的二线：top:50%;变换：translateY（-50%）；。关于高度，您可以在 modal-body 上进行调整。如果您在对话框本身上设置高度，您最终会得到裁剪的内容。

【解决方案2】：

您可以尝试这样的事情（无需引导）：

HTML：

<div class="modal-dialog">
    <div class="modal-dialog-small">
        Lorem ipsum dolor sit amet...
    </div>
</div>

CSS：

.modal-dialog {
    width: auto;
    height: auto;
    position: fixed;
    text-align: center;
    top: 10px;
    left: 10px;
    bottom: 10px;
    right: 10px;
    max-width:900px;
    background: red;
}

.modal-dialog-small {
    display: inline-block;
    width: 100%;
    height: 100%;
    text-align: left;
    background: blue;
    max-width: 360px;
    max-height: 340px;
    margin-top: 50vh;
    transform: translateY(-50%);
}

Fiddle JS link

Danny H 的回答比我的更完整。

【讨论】：

请在此处编写代码，而不是提供链接