Question

我创建了旋转木马，我需要覆盖样式指示器按钮。我有风格：

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

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

Answer 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不需要修改，因为它使用静态位置不会感觉到那些}

Answer 2

您使用的是哪个Bootstrap版本？

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

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

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

Answer 3

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

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

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

如何覆盖引导程序样式

3 个答案: