Twitter Bootstrap modal opening/closing causes fixed header to jump

后端未结

关注

 14  2288

I am almost done with a simple 2-page website for my registered domain names. Unfortunately I have one small issue I can\'t seem to fix: a jumpy header when a Twitter Bootst

相关标签:

14条回答

耶瑟儿～

2021-01-08 01:56
Bootstrap adds class="modal-open" and padding-right: 15px; to body when the modal is shown. To remove the right shift and keep the scroll bar add this to your css:
```
body.modal-open {
  overflow: inherit;
  padding-right: 0 !important;
}
```
Tried in bootstrap 3.3.4
0 讨论(0)
发布评论:

提交评论
- 加载中...

慢半拍i

2021-01-08 02:00

I have a structure:

<html>
<body>
  <nav class="navbar navbar-fixed-top">...</nav>
  <section>
    <div class="container">...</div>
  </section>
  <section>
    <div class="container">...</div>
  </section>
  <footer>...</foter>
</body>
</html>

I'm using this CSS:

body.modal-open {padding-right: 0 !important}
body.modal-open nav,
body.modal-open section,
body.modal-open footer {padding-right: 17px !important}

0 讨论(0)

逝去的感伤

2021-01-08 02:00
Add the following to your CSS:
```
body {
  overflow: inherit;
  padding-right: 0 !important;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

悲哀的现实

2021-01-08 02:00

For Bootstrap 4 sticky-top, use the following snippet. Tested all the CSS solutions on this page but none worked for Bootstrap 4.

<script type="text/javascript">

    $('body').on('show.bs.modal', function () {
        $('.sticky-top').css('margin-left', '-=0px');
    });

    $('body').on('hidden.bs.modal', function () {
        $('.sticky-top').css('margin-left', 'auto');
    });

</script>

My page design was as follows

<header class="container">
    <div class="row">

    </div>
</header>

<div class="container sticky-top">
    <nav class="navbar navbar-expand-lg">
        This div jumped/shifted 17px to the right when opening a modal
    </nav>
</div>

0 讨论(0)

醉话见心

2021-01-08 02:01
I came around same issue and I solved it as follows

just add
```
body.modal-open {
  position: fixed;
  overflow: scroll;
  width: 100%;
  padding-right: 0!important;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
梦如初夏

2021-01-08 02:04
All this happens because of this part of code in bootstrap.js:
```
Modal.prototype.setScrollbar = function () {
    var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10)
    if (this.scrollbarWidth) this.$body.css('padding-right', bodyPad + this.scrollbarWidth)
}
```
That annoying problem happens in Firefox 32.0 (Gecko/20100101) and Chromium Version 37.0.2062.94 (Webkit 537.36) (Ubuntu 14.04). Not happens in QupZilla Version 1.6.6 (WebKit 537.21).

For me, the dirty fix is to comment the conditional line, after that it works in all browsers I tested (including some android's browsers).

NOTE: if you comment that line, you should be careful with the size of your modals since bootstrap will not create enough space for the new scrollbar.

Regards.
0 讨论(0)
发布评论:

提交评论
- 加载中...