添加命名空间后,引导模式不起作用

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 无法访问。

【讨论】:

以上是关于添加命名空间后,引导模式不起作用的主要内容,如果未能解决你的问题,请参考以下文章

引导模式在 React JS 中不起作用

ajax 后引导程序中的工具提示不起作用

为啥引导工具提示在引导模式中不起作用?

悬停在引导模式图像中不起作用

输入类型=“日期”在引导模式下不起作用

引导向导下一个按钮不起作用