网站首页
精品模板
会员模板
建站资源
站长素材
建站教程
编程笔记
编程问答
编程问答
前端开发问题 Java开发问题 C/C++开发问题 Python开发问题 C#/.NET开发问题 php开发问题 移动开发问题 数据库问题
沃梦达建站-编程问答-前端开发问题-正文

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

2023-04-19前端开发问题
4
本文介绍了Twitter Bootstrap 模态打开/关闭导致固定标题跳转的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！

问题描述

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

如何重新创建

  1. 在网络浏览器中打开

    我想要什么

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

    更新

    我注意到跳转标题只发生在固定位置的元素中，例如我的标题(添加了 Bootstrap 类 navbar-fixed-top).它甚至出现在 Bootstrap 网站本身:http://getbootstrap.com/javascripts.转到桌面上的模式 > 可选尺寸"区域，然后单击其中一个按钮.您会看到右侧菜单来回跳动.

    当模式打开时，类 .modal-open 被添加到 body 元素中(感谢 @Pred 指出这一点).它在右侧添加了 15px 的填充，与滚动条间距相同.这可以防止身体来回跳跃.

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

    解决方案

    我似乎找到了解决问题的快速方法.它使用一段 javascript 为标题添加额外的样式(15px padding-right)以防止它跳跃.这可能不是最好的解决方案，但现在它工作得很好.

    由于在小于 768 像素(移动)的视口上没有问题，这段代码仅将额外的 15 像素添加到更大的视口，例如台式机和笔记本电脑

相关推荐

Fatal error: Call to a member function fetch_assoc() on a no
业务场景：使用update语句去更新数据库字段。 原因：update接收值不正确。原来代码： $query = "UPDATE student SET date = now() WHERE id = $id";$result = $mysqli-query($query2) or die($mysqli-error); // 问题出现了在这句 $data = $result-fetch_ass...
2024-12-13 前端开发问题
136
layui实现laydate日历控件控制之前日期不可选择
具体实现代码如下： laydate.render({ elem: '#start_time', min:0, //,type: 'date' //默认，可不填}); 只要加一个min参数，就可以控制了。0表示之前的日期不可...
2024-11-29 前端开发问题
133
ajax请求获取json数据并处理的实例代码
ajax请求获取json数据并处理的实例代码 $.ajax({ type: 'GET', url: 'https://localhost:44369/UserInfo/EditUserJson',//请求数据 data: json,//传递数据 //dataType:'json/text',//预计服务器返回的类型 timeout: 3000,//请求超时的时间 //回调函数传参 suc...
2024-11-22 前端开发问题
215
layui 实现实时刷新一个外部的div
主页面上显示了一个合计，在删除和增加的时候需要更改这个总套数的值： //html代码div class="layui-inline layui-show-xs-block" style="margin-left: 10px" id="sumDiv"spanSOP合计:/spanspan${totalNum}/spanspan套/span/div 于是在我们删除这个条数据后，...
2024-11-14 前端开发问题
156
layui 单选框、复选框、下拉菜单不显示问题如何解决？
1. 如果是ajax嵌套了 页面， 请确保 只有最外层的页面引入了layui.css 和 layui.js ,内层页面 切记不要再次引入 2. 具体代码如下 layui.use(['form', 'upload'], function(){ var form = layui.form; form.render(); // 加入这一句});...
2024-11-09 前端开发问题
313
layui laydate日期时间范围，时间默认设定为23:59:59
在Layui中，如果你想设置日期时间选择器（datetime）的默认结束时间为当天的23:59:59，你可以使用如下代码： laydate.render({ elem: '#test10' ,type: 'datetime' ,range: true ,max: '{:date("Y-m-d 23:59:59")}' ,ready: function(date){ $(".layui-laydat...
2024-10-24 前端开发问题
279

热门文章

1错误 [ERR_REQUIRE_ESM]:不支持 ES 模块的 require() 2vue中yarn install报错：info There appears to be trouble with you 3为什么 Chrome(在 Electron 内部)会突然重定向到 chrome-error://chromewebdat 4“aria-hidden 元素不包含可聚焦元素"显示模态时的问题 5使用选择器在 CSS 中选择元素的前一个兄弟 6js报错：Uncaught SyntaxError: Unexpected string 7layui怎么刷新当前页面？ 8将模式设置为“no-cors"时使用 fetch 访问 API 时出错

热门精品源码

最新VIP资源

1多功能实用站长工具箱html功能模板 2多风格简历在线生成程序网页模板 3论文相似度查询系统源码 4响应式旅游景点宣传推广页面模板 5在线起名宣传推广网站源码 6酷黑微信小程序网站开发宣传页模板 7房产销售交易中介网站模板 8小学作业自动生成程序