如何覆盖引导样式答案

【问题标题】：How to override bootstrap style如何覆盖引导样式
【发布时间】：2017-01-05 01:00:32
【问题描述】：

我创建了轮播，我需要覆盖样式指示器按钮。我有风格：

.carousel-indicators {
    position: absolute; 
    bottom: 10px;
    left: 50%; 
    z-index: 1;
    width: 60%; 
    padding-left: 0;
    margin-left: -30%; 
    text-align: center; 
    list-style: none;
    display: inline-block;
}

以及需要得到：

.carousel-indicators {
    z-index: 1;
    padding-left: 0;
    list-style: none;
    display: inline-block;
}

如何覆盖样式或删除默认样式？

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

你的意思是默认css的样式？

.carousel-indicators {
    z-index: 1;
    padding-left: 0;
    list-style: none;
    display: inline-block;
    /*lets override other properties*/
    position: static;/*or relative*/
    width: auto;
    margin: 0;
    text-align: left;
}

_{top、left 不需要修改，因为它使用静态位置不会对那些感觉敏感}

【讨论】：

【解决方案2】：

您还应该注意脚本的加载顺序，以使一切正常运行。如果你覆盖 CSS，最后应该加载被覆盖的代码。同样有趣的是利用重要的：

.exampleClass {
    margin: 0 !important;
}
.exampleClass {
    margin: 5px;
}

第一个将覆盖第二个，因此 .exampleClass 的边距为 0，因为使用 !important 您可以告诉浏览器该指令的权重高于其他指令。但是请记住，当您有多个重要语句时，CSS 将使用代码的逻辑加载顺序，因为在这种情况下，浏览器无法知道其中哪一个比另一个更重要。

【讨论】：

【解决方案3】：

您使用的是哪个 Bootstrap 版本？

如果是 CSS 版本，只需使用更具体的选择器编写样式即可。例如：

#your-carousel .carousel-indicators {
    /* your styles*/
}

如果您使用 LESS 版本的 Bootstrap（我一直推荐的选项），您可以在 carousel.less 文件中轻松更改它并编译为 CSS 版本。

【讨论】：

引导程序 v3.3.1。无论如何，我已经尝试过加载引导程序的样式。
好的，但我的意思是如果它已经编译并且您已经将链接放置到 CSSversion（例如来自 CDN），或者您有本地 .less 版本并且您在每次更改后将其编译为 CSS。