Bootstrap 3.3.2在具有或不具有垂直滚动条的所有视口尺寸上居中模态 [英] Bootstrap 3.3.2 Center modal on all viewport sizes with or without vertical scrollbar

问题描述

我得到的印象是Bootstrap 3.3.2模态仍然需要很多工作。不仅是恶劣的错误打开模式正在将body内容向左移动＃9855 仍未解决，请参阅此处修改滚动条检查，停止静态导航移位＃13103 < a>（注释在底部），没有，即使在活BS站点上的默认模式是不居中，我认为错误＃9855（上面链接）也导致这 Modal隐藏垂直浏览器滚动条＃1081 。

如果您将BS网站作为代码示例 Bootstrap modal可选大小，请点击大或小模态演示在一个体面的视口宽度模态似乎居中。

当调整浏览器大小以使模态几乎填满视口宽度时，可以清楚地观察到模态倾向于在浏览器的左手边，我假设由于Bootstrap乱七八糟的滚动条宽度计算或通常乱七八糟与滚动条及其宽度。

现在有两个选项，使用一个不是来自BS的模态插件（有大量的模态插件，完全中心水平和垂直在视口以及响应），或者，不知何故开始把一些工作到BS模态，并得到这些问题固定的。

我仍然试图去使用BS默认模态，并且我试图将它居中，在这种情况下水平，在所有视口大小，考虑到垂直

从这个美丽的例子可以看出，居中百分比宽度/高度元素可以将元素居中，即使在视口中具有百分比值作为宽度和高度。 p>

为了解决我的问题，Chris Coyier展示的技术，这里有一个示例代码， Codepen：Percentage sized and still centered work with BS 3.3.2？

  div {
 position：absolute; 
 left：50％; 
 top：50％; 
 transform：translate（-50％，-50％）; 
  

我相信有很多开发者有这个完全相同的问题，模态在所有视口尺寸有或没有垂直滚动条。 Chris的示例在垂直滚动条上效果非常好。因此，将.modal对话框包装在一个div中，使用Chris的中心化技术最终会摆脱这个和后续的bug？

如何将BS 3.3.2模态所有的视口大小有没有垂直滚动条被显示，取决于模态的高度？

老实说，我真的不喜欢BS模态，乍一看所有的似乎看起来和工作非常顺利，但如果你实际开始与它发展有很多问题，出现了，这么老，这种挫败我，所以请原谅我这可能是严厉的语气。我只是想使用BS，而不是花时间在如何解决的问题，其他插件似乎完全与几行代码。

任何帮助，或技术（包括代码）真正集中模态水平在视口中真的非常感谢，这是与CSS或jQuery。感谢您的帮助。

解决方案

使用css，我们可以将Bootstrap模式放在垂直中心。

  .modal {
 text-align：center; 
 padding：0！important; 
} 
 
 .modal：before {
 content：''; 
 display：inline-block; 
 vertical-align：middle; 
 margin：-2px; 
 height：100％; 
} 
 
 .modal-dialog {
 display：inline-block; 
 vertical-align：middle; 
} 
  

Bootstrap模态响应垂直居中？

I am getting the impression that the Bootstrap 3.3.2 modal still needs a lot of work. Not only is the nasty bug Open modal is shifting body content to the left #9855 still not resolved, see here Modify scrollbar check, stop static nav shift #13103 (comments at the bottom), no, even the default modal on the live BS site is not centred and I assume bug #9855 (linked above) is also causing this Modal hides the vertical browser scrollbar #1081 .

If you check the BS site as a code example Bootstrap modal optional sizes, click either the large or small modal demo at a decent viewport width the modal "seems" centred. Though it is not.

When resizing the browser so that the modal nearly fills the viewport width one can clearly observe that the modal is leaning to the left hand side of the browser, I assume due to Bootstrap messing up the scrollbar width calculations or generally messing round with the scrollbar and its width.

Now there is two options, either use a modal plugin that does not come from BS (there is plenty of modal plugins that perfectly center horizontally and vertically in the viewport as well as being responsive), or, somehow start putting some work into the BS modal and get those issues fixed.

I am still trying to go with the BS default modal and am trying to center it, in this case horizontally, on all viewport sizes, taking into consideration the vertical scrollbar being shown or not, depending on the height of the modal.

As can be seen in this beautiful example Centering Percentage Width/Height Elements it is possible to center elements, that even have a percentage value as width and height in the viewport.

To come to my question, would the technique showcased by Chris Coyier, here you have an example code, Codepen: Percentage sized and still centered work with BS 3.3.2?

  div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

I am sure there is plenty of devs out there that have had this exact same issue, simply centering the modal on all viewport sizes either with or without vertical scrollbar. Chris's example works very well with the vertical scrollbar. So would wrapping the .modal-dialog in a div with Chris's centering technique finally get rid of this and subsequent bugs?

How do you center the BS 3.3.2 modal on all viewport sizes with or without a vertical scrollbar being shown, depending on the modal's height?

To be honest I am really not amused about the BS modal, at first glance it all seems to look and work very smooth but if you actually start development with it there is so many issues that come up and are so old, it kind of frustrates me, so please do forgive me for the possibly harsh tone here. I am just really wanting to use BS instead of having to spend time on how to fix issues that other plugins seem to master perfectly with a few lines of code.

Any help, or technique (including code) that really centers the modal horizontally in the viewport is really very much appreciated, be this with CSS or jQuery. Thank you for your help.

解决方案

Using css we can place Bootstrap modal at vertical center.

    .modal {
        text-align: center;
        padding: 0!important;
    }

    .modal:before {
        content: '';
        display: inline-block;
        vertical-align: middle;
        margin: -2px;
        height: 100%;
    }

    .modal-dialog {
        display: inline-block;
        vertical-align: middle;
    }

Bootstrap modal responsive vertical centering?

这篇关于Bootstrap 3.3.2在具有或不具有垂直滚动条的所有视口尺寸上居中模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！