覆盖元素的 CSS 'position: relative;' 的正确方法是什么?使用 Bootstrap 2.2.1?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/13404739/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 20:47:10  来源:igfitidea点击:

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

csstwitter-bootstraphtml5boilerplateinitializr

提问by Alex Straffin

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.

我正在使用 Twitter Bootstrap 2.2.1 Initializr 样板开发一个项目。为了正确覆盖 Bootstrap 的默认 CSS 属性,您需要在“main.css”中为受影响的类创建一个条目并添加所需的属性。

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

在这种特殊情况下,Bootstrap 有一个名为“.collapse”的类,它应用于默认导航栏。

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

对我造成问题的部分是“位置:相对;”。我需要没有立场声明。现在我知道我可以打开 Bootstrap CSS 文件并对其进行编辑,但是如果文件得到更新,该更改将丢失。

What is the proper way of overriding this CSS entry?

覆盖此 CSS 条目的正确方法是什么?

回答by gregory

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.

在 bootstrap.css 之后包含您自己的 CSS 文件,并使用相同的选择器编写规则。至于位置属性,您可以使用position: static;或您需要的任何内容。

回答by Tom Sarduy

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

如果只是一个属性,您可以将内联 css 添加到 html 元素并将该position属性重置为其默认值:

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

但是如果你认为你会改变/添加其他样式,那么你应该在 bootstrap.css 之后添加你自己的 CSS 文件,这样你的所有样式都会覆盖 bootstrap 默认的 css。