2014-12-19 65 views
2

我创建了传送带,我需要覆盖样式指标按钮。我有风情:如何覆盖引导样式

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

如何重写样式或删除默认?

回答

2

你的意思是它的默认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; 
} 

顶部,左不需要,因为它是使用静态的立场不会感知到用于您正在使用哪个版本的引导者

0

修改?

如果是CSS版本,只需使用更具体的选择器编写您的样式。例如:

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

如果使用引导程序(我总是建议选项)的LESS版本,你可以很容易地改变它在carousel.less文件和编译的CSS版本。

+0

Bootstrap v3.3.1。无论如何,我试过装bootstrap的样式。 – 2014-12-19 08:27:57

+0

好的,但是我的意思是它已经编译好了,并且已经把链接指向了CSSversion(例如来自CDN),或者你有本地的.less版本,并且在每次更改之后将它编译为CSS。 – 2014-12-19 08:51:55

0

您还应该留意脚本的加载顺序,以使所有内容正常工作。如果您覆盖CSS,则重写的代码应该最后加载。同样有趣的是利用重要:

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

第一个将覆盖第二个,这样.exampleClass将有0保证金因为重要的是你可以告诉大家,这个指令具有较高权重的浏览器!比其他人。但请记住,当您将重要语句乘法时,CSS将使用代码的逻辑加载顺序,因为在这种情况下,浏览器无法知道哪个比另一个更重要。