首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Bootstrap 3模式触发并导致页面暂时向左移动/浏览器滚动条问题

问Bootstrap 3模式触发并导致页面暂时向左移动/浏览器滚动条问题
EN

Stack Overflow用户
提问于 2013-11-14 01:15:26
回答 21查看 76.7K关注 0票数 79

我在一个使用Bootstrap 3.1.0的网站上工作。

你会注意到,当模式窗口打开时,浏览器滚动条瞬间消失,然后又回来了。当您关闭它时,它也会执行相同的操作。

我如何才能让它在没有浏览器滚动条交互的情况下打开和关闭。我在堆栈上看到过人们遇到问题的帖子,但我找不到针对我的问题的具体答案,所以如果其他人提出了这个请求,并且有人知道它并希望将我链接到它,我将不胜感激。在发帖之前,我已经搜索了大约2个小时。

EN

回答 21

Stack Overflow用户

发布于 2013-11-14 03:35:56

代码语言:javascript
复制
.modal {
 overflow-y: auto;
}

.modal-open {
 overflow: auto;
}

会把它处理掉。这是为了使模态的工作更具响应性,因此如果屏幕太短,您可以向下滚动查看模态。它还可以在模式打开时阻止背景可滚动。如果您不需要该功能,那么您可以使用我发布的css。

更多信息:他们在body上设置了.mode-open,这会阻止body上的所有滚动,并隐藏body滚动条。然后,当模式出现时,它有占据整个屏幕的黑色背景,并且有overflow-y: scroll,它强制滚动条返回,所以如果模式扩展通过屏幕底部,你仍然可以滚动黑色背景并看到其余部分。

票数 93
EN

Stack Overflow用户

发布于 2014-09-21 03:27:02

仅使用CSS就可以轻松解决左移问题。

代码语言:javascript
复制
.modal-open[style] {
padding-right: 0px !important;
}

您只是覆盖了代码中存在的内联样式。我在WordPress构建中使用我的,内联样式被应用于body。看起来像这样:

代码语言:javascript
复制
<body class="home blog logged-in modal-open" style="padding-right: 15px;">

希望这对某些人有帮助!

票数 75
EN

Stack Overflow用户

发布于 2015-02-18 00:39:46

代码语言:javascript
复制
.modal {
    overflow-y: auto;
}

.modal-open {
    overflow: auto;
}

.modal-open[style] {
    padding-right: 0px !important;
}

感谢ben和cjd。

上面的代码看起来很适合我。

票数 39
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/19960162

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档