blocks|key|2394259|text|这是因为当模态出现时，身体会收到“溢出:隐藏”。这导致滚动条隐藏，距离引用滚动条的宽度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2394260|要测试它，请使用：|2394261|body{
++++overflow:+scroll+!important;
}|code-block|syntax|javascript|2394262|“修复”的问题是，不同浏览器的滚动条略有不同，所以要么使滚动条始终可见，要么使用jquery添加一些填充(大约18+is+)；|2394263|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

This happens becouse when the modal show up, body receives "overflow:hidden". This cause the scroll bars to hide, the distance refers to the scrollbar width.

To test it, use:

<pre><code>body{
 overflow: scroll !important;
}
</code></pre>

The problem to "fix" this is, scrollbars vary a little from browser to browser, so or you make the scrollbars always visible, or you add some padding-right with jquery (around 18px);

blocks|key|2394269|text|最新答案|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2394270|这应该能起作用：|2394271|.modal-open[style]+{
+++padding-right:+0px+!important;
}|code-block|syntax|javascript|2394272|JSFIDDLE|2394273|希望这会有帮助！|2394274|如果您想知道为什么，“模式打开”类应用了“填充-右:15+to”的内联样式，所以只需覆盖CSS就可以了。|2394275|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/tzhben/gqrpf1vw/5/^0|0|4|0|0|0|0|8|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|13|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|15|8|@]|D|@$9|16|A|17|1|18]]|E|$]]|$1|O|3|P|5|6|7|19|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1A|8|@]|D|@]|E|$]]|$1|S|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]]]

Updated Answer

This should do the trick:

<pre><code>.modal-open[style] {
 padding-right: 0px !important;
}
</code></pre>

<a href="http://jsfiddle.net/tzhben/gqrpf1vw/5/" rel="noreferrer">JSFIDDLE HERE</a>

Hope this helps!!!

Incase you're wondering why, the "modal-open" class was applying a inline style of "padding-right: 15px" so just overwrite the CSS and it seems to be working fine.

blocks|key|1158359|text|这仅仅是因为你的身体失去了滚动条，你的身体宽度代表滚动条的宽度扩展。或者向body+css属性添加溢出:滚动；或者使用一些自定义滚动条js插件--有一些滚动条与body元素不共享窗口宽度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1158360|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

It's just because your body loses scrollbar and your body width expands on behalf of the scrollbars width. Either add overflow:scroll; to the body css properties or use some custom scroll bar js plugin - there are scrollbars that dont share window width with body element.

blocks|key|1037923|text|尝尝这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1037924|.modal+{
++++overflow-y:+auto;
}

.modal-open+{
++++overflow:+auto;
}|code-block|syntax|javascript|1037925|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try this

<pre><code>.modal {
 overflow-y: auto;
}

.modal-open {
 overflow: auto;
}
</code></pre>

blocks|key|2394338|text|当模态打开时，页面中的所有内容都在移动。另外，一个类.modal-open正在添加到body标记中。因此，我尝试将padding-right:+15px;添加到.modal-open中。除了header，身体不再移动。因此，我还在.modal-open+header中添加了一个.modal-open+header，现在一切都很好。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2394339|应增加CSS：|2394340|​|2394341|.modal-open+{
++padding:+right:+15px;
}
.modal-open+header+{
++padding:+right:+15px;
}|code-block|syntax|javascript|2394342|2394343|entityMap^0|Q|B|1L|K|28|B|2N|6|37|I|3V|I|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]|$9|W|A|X|B|C]|$9|Y|A|Z|B|C]|$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|14|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|15|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|16|8|@]|D|@]|E|$M|N]]|$1|O|3|I|5|6|7|17|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|Q|$]]

When the modal opens, everything from the page are moving. Also, a class <code>.modal-open</code> is adding up in the body tag. So, I tried to add a <code>padding-right: 15px;</code> to <code>.modal-open</code>. The body is no longer moving except to <code>header</code>. So I've also added a <code>padding-right: 15px</code> to the <code>.modal-open header</code> and everything works fine now.

CSS should be added:

<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.modal-open {
 padding: right: 15px;
}
.modal-open header {
 padding: right: 15px;
}</code></pre>
</div>
</div>

blocks|key|2394351|text|简单修正|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2394352|.modal-open+{
++position:+fixed;
++overflow:+scroll;
++width:+100%25;
++padding-right:+0!important;
}|code-block|syntax|javascript|2394353|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Simple Fix

<pre><code>.modal-open {
 position: fixed;
 overflow: scroll;
 width: 100%;
 padding-right: 0!important;
}
</code></pre>

blocks|key|2394370|text|除了将引导程序更改为|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2394371|(this.$body.css("padding-right")%7C%7C0,10)+|code-block|syntax|javascript|2394372|至|2394373|(this.$body.css("padding-right")%7C%7C0,0)|2394374|我花了大约一个小时才找到它换衣服|2394375|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

none work but changing the bootstrap itself from

<pre><code>(this.$body.css("padding-right")||0,10) 
</code></pre>

to 

<pre><code>(this.$body.css("padding-right")||0,0)
</code></pre>

Took me about an hour to find it and change

blocks|key|2394384|text|当模型打开时，您可以在CSS文件中移动标题：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2394385|.modal-open+header+{+padding-right:+17px;+}|code-block|syntax|javascript|2394386|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can move your header when the model opens, in your CSS file:

<pre><code>.modal-open header { padding-right: 17px; }
</code></pre>

blocks|key|1158429|text|这个问题已经在bootstrap的回购中得到了报道，我发现这个解决方案对我来说是有效的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1158430|https://github.com/twbs/bootstrap/issues/14040|offset|length|1158431|$(document).ready(function(){
++++$(window).load(function(){
++++++++var+oldSSB+=+$.fn.modal.Constructor.prototype.setScrollbar;
++++++++$.fn.modal.Constructor.prototype.setScrollbar+=+function+()+{
++++++++++++oldSSB.apply(this);
++++++++++++if(this.bodyIsOverflowing+&&+this.scrollbarWidth)+{
++++++++++++++++$('.navbar-fixed-top,+.navbar-fixed-bottom').css('padding-right',+this.scrollbarWidth);
++++++++++++}+++++++
++++++++}
++++++++var+oldRSB+=+$.fn.modal.Constructor.prototype.resetScrollbar;
++++++++$.fn.modal.Constructor.prototype.resetScrollbar+=+function+()+{
++++++++++++oldRSB.apply(this);
++++++++++++$('.navbar-fixed-top,+.navbar-fixed-bottom').css('padding-right',+'');
++++++++}
++++});
});|code-block|syntax|javascript|1158432|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1A|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|H|7|W|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|C]]]]

The issue is already reported in bootstrap's repo, and I have found this solution working for me. 

<a href="https://github.com/twbs/bootstrap/issues/14040" rel="nofollow noreferrer">https://github.com/twbs/bootstrap/issues/14040</a>

<pre><code>$(document).ready(function(){
 $(window).load(function(){
 var oldSSB = $.fn.modal.Constructor.prototype.setScrollbar;
 $.fn.modal.Constructor.prototype.setScrollbar = function () {
 oldSSB.apply(this);
 if(this.bodyIsOverflowing &amp;&amp; this.scrollbarWidth) {
 $('.navbar-fixed-top, .navbar-fixed-bottom').css('padding-right', this.scrollbarWidth);
 } 
 }
 var oldRSB = $.fn.modal.Constructor.prototype.resetScrollbar;
 $.fn.modal.Constructor.prototype.resetScrollbar = function () {
 oldRSB.apply(this);
 $('.navbar-fixed-top, .navbar-fixed-bottom').css('padding-right', '');
 }
 });
});
</code></pre>

blocks|key|2394404|text|为我工作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2394405|.modal-open+.navbar-fixed-top,
.modal-open+.navbar-fixed-bottom+{
++++padding-right:+17px;
}|code-block|syntax|javascript|2394406|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Works for me:

<pre><code>.modal-open .navbar-fixed-top,
.modal-open .navbar-fixed-bottom {
 padding-right: 17px;
}
</code></pre>

blocks|key|1034263|text|只需添加到您的标题类“是-固定的”：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1034264|<header+class="is-fixed">|code-block|syntax|javascript|1034265|这门课对你的设计没有任何影响。但是，当模态打开时，Bootstrap会添加到这个类中的每个元素中，如下所示：|1034266|style="padding-right:+17px;"|1034267|其中，17+od是滚动条的实际宽度。body元素也是如此。|1034268|<body>+//close+modal
<body+class="modal-open"+style="padding-right:+17px;">+//open+modal|1034269|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

Just add to your header class &quot;is-fixed&quot;:
<pre><code>&lt;header class=&quot;is-fixed&quot;&gt;
</code></pre>
This class has no efect to your design. But when the modal is open, Bootstrap will add to every element with this class somethink like that:
<pre><code>style=&quot;padding-right: 17px;&quot;
</code></pre>
where 17px is the actual width od the scrollbar. Bootstrap do the same with the body element.
<pre><code>&lt;body&gt; //close modal
&lt;body class=&quot;modal-open&quot; style=&quot;padding-right: 17px;&quot;&gt; //open modal
</code></pre>

I am using the Bootstrap framework and having some trouble with my header and modals.
The header on my page is fixed and when a modal opens it moves a few pixels to the right and moves back again when the modal closes.

An example is shown here: <a href="http://jsfiddle.net/D2RLR/7400/">http://jsfiddle.net/D2RLR/7400/</a>

I would like it to not move at all. I know this is caused by the scrollbar which is why the container in the fiddle is set to 2000px. Any ideas to how I can solve this problem?

The code is the following:

HTML

<pre><code>&lt;div class="container"&gt;

 &lt;header&gt;
 &lt;nav id="menu" class="dl-menuwrapper"&gt;
 &lt;a href="#" class="menu-toggle dl-trigger"&gt;&lt;i class="fa fa-reorder"&gt;&lt;/i&gt;&lt;/a&gt;
 &lt;ul class="dl-menu"&gt;
 &lt;li&gt;
 &lt;a href="#home" class="scroll"&gt;&lt;i class="fa fa-home"&gt;&lt;/i&gt;Home&lt;/a&gt;
 &lt;/li&gt;
 &lt;li&gt;&lt;a href="#profile" class="scroll"&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt;Profile&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/nav&gt;

 &lt;/header&gt;
&lt;!-- Button trigger modal --&gt;
&lt;button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"&gt;
 Launch demo modal
&lt;/button&gt;
</code></pre>

CSS

<pre><code>@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css');

.container {
 margin-top: 10px;
}

button {
 margin-top:100px;
}

.modal-content {
 height:500px; 
}

header {
 width: 150px;
 margin:auto;
 left:0;
 right:0;
 border-bottom-right-radius: 10px;
 border-bottom-left-radius: 10px;
 text-align: center;
 position: fixed;
 background-color:rgba(0, 0, 0, 0.90);
 z-index: 2;
 }
</code></pre>

Bootstrap: Header moves when modal opens

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我使用的引导带框架，并有一些问题，我的头和模式。我页面上的标题是固定的，当一个模式打开时，它会向右移动几个像素，然后在模式关闭时再次移动。这里显示了一个示例：我希望它一点也不动。我知道这是由滚动条引起的，这就是为什么小提琴中的容器被设置为2000 to。我有什么办法解决这个问题吗？守则如下：<div class="co...

问引导:当模态打开时头部移动
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导:当模态打开时头部移动EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导:当模态打开时头部移动
EN