bootstrap弹窗导致内容区左移

用bootstrap在多次弹窗后导致了内容区左移动了,如下:

最后只要加上如下代码,就可以了

body{
    padding-right: 0!important;
}

同时,在默认的弹窗是右边的滑轮是不能滑动的

.modal-open {
    overflow: initial;
}

便可以了.modal-open是在弹窗时加在body上的,当然不要滑动就直接改为auto

bootstrap的遮罩层是.modal-backdrop,所以有些在遮罩层上面的肯定不要设置遮罩层的z-index, 如下:

.modal-backdrop{
    z-index: 3;
}

以上就是这些....加油

时间: 2024-10-14 12:20:51

bootstrap弹窗导致内容区左移的相关文章

JavaScript强化教程——Bootstrap 包的内容

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 -- Bootstrap 包的内容 基本结构:Bootstrap 提供了一个带有网格系统.链接样式.背景的基本结构.这将在 Bootstrap 基本结构 部分详细讲解. CSS:Bootstrap 自带以下特性:全局的 CSS 设置.定义基本的 HTML 元素样式.可扩展的 class,以及一个先进的网格系统.这将在 Bootstrap CSS 部分详细讲解. 组件:Bootstrap 包含了十几个可重用

实现移动端顶部与底部固定,内容区优化的效果

实现顶部与底部固定的效果十分容易,且很多人都会选择用这个方式,就是顶部position:fixed,底部也position:fixed.实现的效果就像下面两张图,container区域是布满整个屏幕的,且滚动条也是滚动在整个屏幕中,调内容区时只能调节高度.    其实还有一种方式可以实现较好的效果,就是内容区只在顶部和底部的中间,内容部分和滚动条也只是中间区域滚动 实现代码: <meta name="viewport" content="width=device-wid

Overflow属性——定义元素(如Div)内容区溢出情况

说明:overflow属性规定当内容溢出元素框时发生的事情. 注释:属性定义溢出元素内容区的内容会如何处理.如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制.因此,有可能即使元素框中可以放下所有内容也会出现滚动条.默认值是 visible. 可用的值: visible:默认值.内容不会被修剪,会呈现在元素框之外. hidden:内容会被修剪,并且其余内容是不可见的. scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容. auto:如果内容被修剪,则浏览器会显示

(模板)网页游戏用的“内容区”的“游戏下载”模板

网页游戏用的"内容区"的下载模板 <style> .article-main{ width:939px; } /*下载中心*/ .big_pub_right { width:960px; } .faq p { line-height:25px; } .pub_title { background:#353b42; height:84px; color:#969db0; line-height:84px; padding:0px 20px; } .pub_title a {

Vue如何实现swiper左右滑动内容区控制导航tab同时切换高亮

Vue如何实现左右滑动内容区控制导航tab同时切换高亮,实现的效果是:点击导航按钮时内容区发生改变,左右滑动内容区时导航按钮跟随切换高亮,停留在某个内容区时刷新页面后仍然停留在当前内容区. 这里涉及到几个点: 1.左右滑动,那就需要用到swiper,当然你可以自己写一个类似的功能,虽然不难但是项目开发中可能会比你引入插件要耗时很多: 2.Vue开发鼓励组件化,所以在这我是分为nav和swiper两个组件,那么就要用到事件发射与接收,我在前面的博文有关于事件发射与接收的心得,具体点击查看: 3.利

Framework7学习笔记之 块/内容区

一:旧版 内容区用于按一定排版格式添加需要文本内容. 旧版中,内容区用  content-block 类表示,位于内容区内外的文本其排版格式不同:位于内容区内的文本也可以用title.inner.inset等类进行进一步排版. <div class="page-content"> <p>内容区之外的文本,排版为:没有背景色,两边没有边距.</p> <!-- 1:普通内容区 --> <div class="content-b

vue+Element左树导航右内容区页面跳转

首先在项目中添加Element UI npm i element-ui -S 修改main.js // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import ElementUI from 'element-ui' impo

使用ASP.NET AJAX与Bootstrap 弹窗解决方案

我在做采购系统时,因为使用了ASP.NET AJAX的UpdatePanel的控件,可以使得页面局部刷新显示.但是使用起来问题还是很多. 下面列出了一种情况,话了将近5个小时才算解决,虽然不是很完美,但是应该够了. 应用背景:在采购系统里,因为一个产品可以有多个供应商,同样一个供应商可以有多个产品.所以产品和供应商是多对多的关系. 在产品页面,用户选择一个产品,我们希望他可以选择供应商.如下图,选择“得利纸业”,然后在单击“管理供应商”,就弹出供应商页面. 其实,如果是采用刷新技术,用户选择“管

BootStrap弹窗

效果图: 注意引入的文件,js文件要在前面 Bootstrap框架中的模态弹出框,分别运用了“modal”.“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-content”中,其主要又包括三个部分:  ? 弹出框头部,一般使用“modal-header”表示,主要包括标题和关闭按钮  ? 弹出框主体,一般使用“modal-body”表示,弹出框的主要内容 ? 弹出框脚部,一般使用“modal-footer”表示,主要放置操作按钮 @{ L