添加命名空间后,引导模式不起作用
Posted
技术标签:
【中文标题】添加命名空间后,引导模式不起作用【英文标题】:Bootstrap modal doesn't work after adding namespace 【发布时间】:2015-11-14 16:00:10 【问题描述】:我在我的引导 css 文件中添加了命名空间以避免冲突。但是,在那之后,模态无法正常工作。添加的内容没有被我的命名空间 div 包围,因此它不起作用。
这是一个例子:
<div class="ssl">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
</div>
<div class="ssl">
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm">
<div class="modal-content">
This is the modal content.
</div>
</div>
</div>
</div>
我使用这段代码通过less添加命名空间:
.ssl
@import (less) 'bootstrap-full.css';
谁能通过提出一些想法来帮助我解决这个问题?
【问题讨论】:
【参考方案1】:在 Bootstrap 4.1 中添加命名空间后,我找到了解决此问题的方法。 您必须从 modal-backdrop 类中删除命名空间,基本上,将其更改为:
.namespace .modal-backdrop
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000;
.namespace .modal-backdrop.fade
opacity: 0;
.namespace .modal-backdrop.show
opacity: 0.5;
到这里:
.modal-backdrop
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000;
.modal-backdrop.fade
opacity: 0;
.modal-backdrop.show
opacity: 0.5;
在我的例子中,自定义引导程序用于容器内部而不是整个页面,因此当我创建模式时,在容器外部创建了一个新的分区,自定义 CSS 无法访问。
【讨论】:
以上是关于添加命名空间后,引导模式不起作用的主要内容,如果未能解决你的问题,请参考以下文章