jquery – 添加命名空间后,Bootstrap模式不起作用

我将命名空间添加到我的bootstrap 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';
}

任何人都可以通过提出一些想法来帮助我解决这个问题吗？

.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;
}