How extend bootstrap classes

杀马特。学长 韩版系。学妹 提交于 2019-12-05 18:30:21

问题


I am doing my first steps with Bootstrap Twitter, and need to extend components. For example, I would like to change the navbar background, but without changing the original css file.

I tried to create a new class .test with the new background:

.test{
    background-color: red !important;
}

And I've invoked it in the hmtl as:

 <div class="navbar navbar-fixed-top test">

But, it doesn't work. How can do this?


回答1:


There are a few ways to customize/extend Bootstrap classes which are all discussed here: Twitter Bootstrap Customization Best Practices

If you intend to override the boostrap styles with your own custom CSS you should avoid using !important as this is generally a bad practice.

In the case of the navbar, the element that has the background-color is navbar-inner so you'd want to override like this:

.test .navbar-inner{
    background-color: red;
}

Custom navbar example: http://bootply.com/61032


How to extend/modify (customize) Bootstrap 4 with SASS



来源:https://stackoverflow.com/questions/17348482/how-extend-bootstrap-classes

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!