Bootstrap Modal触发后Carousel轮播组件自定义CSS失效问题咨询

问题原因 #

• 你使用了Bootstrap的data-remote属性加载远程contact.html内容到模态框中，如果contact.html内部重复引入了Bootstrap CSS文件，后加载的Bootstrap CSS优先级高于主页面的自定义CSS，会直接覆盖你写的Carousel样式规则。
• 你的自定义Carousel CSS权重低于Bootstrap默认的Carousel样式权重，模态框加载触发页面样式重绘时，低优先级的自定义样式会被默认规则覆盖。
• Bootstrap 4及以上版本已经废弃了data-remote属性，该属性的自动加载逻辑本身也可能引发样式重计算冲突。

解决方案 #

1. 删除远程页面重复资源 #

打开contact.html，移除页面中重复引入的Bootstrap CSS、JS文件，主页面已经加载过的公共资源不需要在模态框加载的子页面重复引入，从根源避免样式覆盖。

2. 提高自定义CSS权重 #

给你写的Carousel自定义选择器添加父级前缀提高权重，避免被默认样式覆盖，修改后的CSS参考如下：

/* CAROUSEL CSS */
.container .carousel-caption {
    position: relative;
    left: 0;
    right: 0;
}

.container .carousel-control-prev {
    justify-content: start;
}
.container .carousel-control-next{
    justify-content: end;
}

.container .carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='red' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}

.container .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='red' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}

/* 移动端样式 */
@media only screen and (max-width: 600px) {
    .container .carousel-caption {
        color: red;
        font-size:12px;
    }
}

/* 非移动端样式 */
@media only screen and (min-width: 600px) {
    .container .carousel-caption {
        color: black;
        font-size:18px;
    }
}

3. 手动加载模态框内容 #

废弃data-remote属性，先移除按钮上的data-remote、data-toggle、data-target属性，改用JS手动加载远程内容后再显示模态框，避免官方废弃API带来的未知冲突，参考代码：

$('.signup').on('click', function() {
  // 加载远程内容到模态框
  $('#theModal .modal-content').load('contact.html', function() {
    // 加载完成后显示模态框
    $('#theModal').modal('show');
  });
  return false;
});

内容的提问来源于stack exchange，提问作者Jeff