Question

我在网站上有几个模态，一旦我在桌面视图中加载中心页面，但在重新打开项目后，它有时会加载页面的左半部分，而右半部分被切断页面，好像它被设置为具有position：right属性。我没有改变css和js的bootstrap模态部分，除了bootstrap之外我没有使用任何其他东西。我创建了一个类添加到模态中以添加每个自中心对齐属性

＆＃13;

.ALmodal{
	align-content:center;
	align-items: center;
	align-self: center;
}
    .iframe-container {    
    padding-bottom: 60%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.iframe-container iframe,
.iframe-container object,
.iframe-container embed{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.modal.in .modal-dialog {
  transform: none; /*translate(0px, 0px);*/
}

＆＃13;

<div class="container">
  <!-- Trigger the modal with a button -->
<center>  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#schd">Open Large Modal</button></center>

  <!-- Modal -->
         <center><div class="modal fade ALmodal" id="schd" role="dialog">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
            <object width="100%" height="500" data="/img/Primal-Kickboxing-2014-Schedule.pdf" >
            </object>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
            </center>
    </div>

＆＃13;

这是我在一个单独的css文件中的其他模态相关的CSS

Answer 1

我会避免使用额外的类来干扰标准的BS类，特别是如果它们的间距与你的ALmodal类似。

我在这里制作了默认的BS Modal，请参阅代码。它也适用于移动设备。问题是，模态默认由BS集中。所以没有必要让一个类告诉它再次居中。这可能搞砸了。使用标准类并从那里开始。

http://www.bootply.com/9LUdALseVe

您还想查看BS Helper Classes。在那里，您会看到Center content blocks部分，看看它是如何将内容集中在一起的。

请不要忘记不支持模态顶部的模态。请参阅here。

如果必须同时打开两个模态，请查看here。虽然我真的不建议从UI或UX的角度来看。使您的设计易于理解和遵循。尝试基本的东西并从那里拿走它。

希望这会有所帮助。如果我在任何方面都错了，请告诉我，以便我将来可以避免同样的错误。谢谢。

我有一个bootstrap模式问题 - 在页面上加载了一半

1 个答案: