What is the proper way to override an element's CSS 'position: relative;' using Bootstrap 2.2.1?

问题

I am working on a project using the Twitter Bootstrap 2.2.1 Initializr boilerplate. In order to properly override Bootstrap's default CSS attributes you need to create an entry for the affected class in 'main.css' and add the desired attributes.

In this particular case Bootstrap has a class called '.collapse' that is applied to the default navbar.

.collapse{
    position:relative;
    height:0;
    overflow:hidden;
    -webkit-transition:height .35s ease;
    -moz-transition:height .35s ease;
    -o-transition:height .35s ease;
    transition:height .35s ease
}

The portion that is causing problems for me is the 'position: relative;'. I need there to be no position statement. Now I know that I can just open the Bootstrap CSS file and edit it but if the file gets updated that change will be lost.

What is the proper way of overriding this CSS entry?

回答1:

Include your own CSS file after bootstrap.css and write a rule with the same selector. As for the position property, you could use position: static; or whatever you'll need.

回答2:

If is just one property you can add inline css to the html element and reset the position property to his default value:

<nav class="collapse" style="position:static">
  <ul>
    <li>....</li>
    <li>....</li>
  </ul>
</nav>

But if you think you will change/add others styles, then you should add your own CSS file after bootstrap.css, with that all your styles will override the bootstrap default css.

来源：https://stackoverflow.com/questions/13404739/what-is-the-proper-way-to-override-an-elements-css-position-relative-using

标签

css

twitter-bootstrap

html5boilerplate

initializr