如何重新创建

Question

对于我注册的域名，我几乎已经完成了一个简单的2页网站。不幸的是，我有一个小问题似乎无法解决：当Twitter Bootstrap模式打开和关闭时，一个跳跃的标题。在移动设备上没有问题。该问题仅发生在台式机和笔记本电脑等较大的视口中。

如何重新创建

在网页浏览器中打开http://www.domains.cloudlabz.nl/domains，并通过降低视口高度确保获得垂直滚动条。
点击其中一个蓝色＆＃39;更多信息＆＃39;的按钮。
一旦模态打开，请注意跳跃标题和消失的滚动条。
关闭模式，注意标题跳回，滚动条重新出现。

检查以下图像（Opera，Safari，Firefox和Chrome中的结果相同）：

Jumping header issue http://i58.tinypic.com/opp99l.gif

我喜欢什么

我喜欢在打开/关闭模态时停止跳跃的标题。滚动条消失的事实不是问题。实际上，我希望它保持这样。

更新

我注意到跳转标题只发生在固定位置元素上，例如我的标题（添加了Bootstrap类navbar-fixed-top）。它甚至发生在Bootstrap网站上：http://getbootstrap.com/javascripts。转到＆＃39;模态＆gt;可选尺码＆＃39;桌面上的区域，然后单击其中一个按钮。您会看到右侧菜单来回跳跃。

当模态打开时，类.modal-open被添加到body元素中（感谢指出@Pred）。它在右侧添加了15px的填充，与滚动条装订线的宽度相同。这可以防止身体来回跳跃。

不幸的是，这个填充显然不适用于固定元素。

Answer 1

当显示模式时，Bootstrap会将class="modal-open"和padding-right: 15px;添加到body。要删除右移并保持滚动条，请将其添加到您的css：

body.modal-open {
  overflow: inherit;
  padding-right: 0 !important;
}

尝试使用bootstrap 3.3.4

Answer 2

我似乎找到了一个快速修复我的问题。它使用一段javascript为标题添加额外的样式（15px padding-right）以防止它跳跃。这可能不是最好的解决方案，但现在它的工作正常。

由于小于768px（移动）的视口没有问题，因此这段代码只会将额外的15px添加到较大的视口，例如台式机和笔记本电脑

<script>

    $(document).ready(function(){

        // Dirty fix for jumping scrollbar when modal opens

        $('#requestModal').on('show.bs.modal', function (e) {
            if ($(window).width() > 768) {
                $(".navbar-default").css("padding-right","15px");
            }
        });

        $('#requestModal').on('hide.bs.modal', function (e) {
            if ($(window).width() > 768) {
                $(".navbar-default").css("padding-right","0px");
            }
        });

    });

</script>

如果你知道一个更好的解决方案（最好只有CSS3），请告诉我。谢谢你的帮助！

Answer 3

当模态打开时，＆＃34;模态打开＆＃34; class被添加到隐藏溢出的HTML <body>元素中。您可以通过覆盖＆＃34;模态打开＆＃34;来改变这种情况。 overflow: inherit的课程。这将使滚动条保持在视图中，就像模式关闭时一样。请记住，只要在页面上打开任何模态，这将更改溢出选项。希望这可以帮助。祝你好运！

Answer 4

所有这些都是因为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)
}

这个恼人的问题发生在Firefox 32.0（Gecko / 20100101）和Chromium Version 37.0.2062.94（Webkit 537.36）（Ubuntu 14.04）中。在QupZilla版本1.6.6（WebKit 537.21）中不会发生。

对我来说，肮脏的解决方法是评论条件行，之后它适用于我测试的所有浏览器（包括一些Android浏览器）。

注意：如果你评论该行，你应该小心模态的大小，因为bootstrap不会为新的滚动条创建足够的空间。

问候。

Answer 5

正如您通常将Bootstrap navbar作为body容器的直接子项：

<body>
  <nav class="navbar navbar-fixed-top">...</nav>
</body>

您可以使用在Bootstrap核心代码中计算的body padding-right值来防止它在打开模式窗口时“跳跃”，以修复navbar问题。纯CSS解决方案如下：

.navbar-fixed-top {
  padding-right: inherit;
}

这很容易。

Answer 6

This one only works if you know your page content is longer than the viewport (so any long scrolling page). You can just add the following to your CSS -

html {
  overflow-y: scroll;
}

.modal-open {
  padding-right: 0!important;
}

Answer 7

另一个解决方案是添加：

.modal-open .navbar-fixed-top {
  overflow-y: scroll;
}

防止其内容跳跃。再一次，这很容易。

Answer 8

我遇到了同样的问题，我解决了以下问题

只需添加

url = new URL(AppHelper.SERVER_URL + phpFile);
connection = (HttpURLConnection) url.openConnection();
connection.setDoOutput(true);
connection.setRequestProperty("Content-Type", "application/x-www-form-urlencoded");
connection.setRequestMethod("POST");

request = new OutputStreamWriter(connection.getOutputStream());
request.write(parameters);
request.flush();
request.close();
String line = "";
InputStreamReader isr = new InputStreamReader(connection.getInputStream());
BufferedReader reader = new BufferedReader(isr);
StringBuilder sb = new StringBuilder();

Answer 9

我在更改前手动更改bootstrap.js：

Modal.prototype.setScrollbar = function () {
    var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10)
    if (this.bodyIsOverflowing) this.$body.css('padding-right', bodyPad + this.scrollbarWidth)
  }

  Modal.prototype.resetScrollbar = function () {
    this.$body.css('padding-right', '')
  }

更改后

：

  Modal.prototype.setScrollbar = function () {
    var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10)
    var headerPad = parseInt(($('.navbar-fixed-top').css('padding-right') || 0), 10)
    if (this.bodyIsOverflowing) this.$body.css('padding-right', bodyPad + this.scrollbarWidth)
    if (this.bodyIsOverflowing) $('.navbar-fixed-top').css('padding-right', headerPad + this.scrollbarWidth)
  }

  Modal.prototype.resetScrollbar = function () {
    this.$body.css('padding-right', '')
    $('.navbar-fixed-top').css('padding-right', '')
  }

Answer 10

我有一个结构：

app.locals.pretty = true

我正在使用这个CSS：

<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>

Answer 11

将以下内容添加到CSS中：

body {
  overflow: inherit;
  padding-right: 0 !important;
}

Answer 12

对于Bootstrap 4 sticky-top，请使用以下代码段。测试了此页面上的所有CSS解决方案，但均不适用于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>

我的页面设计如下

<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>

Answer 13

就我而言，可以通过添加注释或删除bootstrap.css文件中的这两行right: 0;和left: 0;来解决：

.navbar-fixed-top,
.navbar-fixed-bottom {
  position: fixed;
  /* right: 0;
  left: 0; */
  z-index: 1030;
}

注意：我使用bootstrap v3.3.7

Answer 14

在4.5中，以下代码解决了固定标头向左滑动的问题。

body.modal-open {
    position: fixed;
    overflow-y: scroll;
    width: 100%;
    padding-right: 0!important;
  }
  .modal-open .fixed-top {
    padding-right: inherit!important;
  }

Twitter Bootstrap模式打开/关闭导致固定标题跳转

如何重新创建

我喜欢什么

更新

14 个答案: