All geek questions in one place

Override Bootstrap CSS

I am using Nav tablets from Twitter-Bootstrap. At certain screen resolutions, tablets are pressed for no apparent reason. When using Firebug, if I delete the display: table from the .nav pills, the problem disappears. I tried to override the: table display in one of my own .css files, but so far Firefox always views my overridden attempt as a separate style.

Here is an example of a problem. I know that this is not the best way to deal with this problem, but it looks like the best way to demonstrate the problem.

Thanks in advance,

Boot CSS:

.nav-tabs:before, .nav-pills:before, .nav-tabs:after, .nav-pills:after { content: ""; display: table; }

My CSS:

 .nav-tabs:before, .nav-pills:before, .nav-tabs:after, .nav-pills:after { display:block !important; }

CSS Results: Firefox seems to recognize both css expressions as separate styles when my display style should override the bootstrap style.

Firefox CSS results

+6
source share
1 answer

If you check your element in Chrome, you will see if the css selector applies to this element to a media request.

When you configured bootstrap, did you check the options in the Feedback section?

I assume the problem is that the css selector from the media request overrides your own css selector.

+1
source

Source: https://habr.com/ru/post/912976/

More articles:


All Articles