我如何重写引导CSS样式?

我需要修改bootstrap.css以适合我的网站。我觉得最好创建一个单独的custom.css文件，而不是直接修改bootstrap.css，一个原因是应该bootstrap.css得到更新，我将遭受尝试重新包括我所有的修改。我将为这些样式牺牲一些加载时间，但对于我覆盖的少数样式来说，这可以忽略不计。

我Hw重写bootstrap.css，以便我删除一个锚/类的风格?例如，如果我想删除图例的所有样式规则:

legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 20px;
  font-size: 21px;
  line-height: inherit;
  color: #333333;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}

我可以在bootstrap.css中删除所有这些，但如果我对覆盖CSS的最佳实践的理解是正确的，我应该做什么呢?

为了明确起见，我想删除所有这些图例的样式，并使用父CSS值。结合Pranav的回答，我会做下面的事情吗?

legend {
  display: inherit !important;
  width: inherit !important;
  padding: inherit !important;
  margin-bottom: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  border: inherit !important;
  border-bottom: inherit !important;
}

(我希望有一种方法可以做到以下几点:)

legend {
  clear: all;
}

当前回答

要重置在引导中为图例定义的样式，您可以在css文件中执行以下操作:

legend {
  all: unset;
}

裁判:https://css-tricks.com/almanac/properties/a/all/

CSS中的all属性重置所有所选元素的属性属性，除了方向和unicode属性控制文本方向。

可能的值有:initial, inherit & unset。

附注:clear属性用于float (https://css-tricks.com/almanac/properties/c/clear/)

2018-08-28 04:57:24

其他回答

有点晚了，但我所做的是，我添加了一个类到根div，然后扩展我的自定义样式表中的每个引导元素:

.overrides .list-group-item {
    border-radius: 0px;
}
.overrides .some-elements-from-bootstrap { 
    /* styles here */
}

<div class="container-fluid overrides">
    <div class="row">
        <div class="col-sm-4" style="background-color: red">
            <ul class="list-group">
                <li class="list-group-item"><a href="#">Hey</a></li>
                <li class="list-group-item"><a href="#">I was doing</a></li>
                <li class="list-group-item"><a href="#">Just fine</a></li>
                <li class="list-group-item"><a href="#">Until I met you</a></li>
                <li class="list-group-item"><a href="#">I drink too much</a></li>
                <li class="list-group-item"><a href="#">And that's an issue</a></li>
                <li class="list-group-item"><a href="#">But I'm okay</a></li>
            </ul>
        </div>
        <div class="col-sm-8" style="background-color: blue">
            right
        </div>
    </div>
</div>

2017-12-10 08:35:27

我发现(bootstrap 4)把你自己的CSS放在bootstrap. CSS和.js后面是最好的解决方案。

找到您想要更改的项(inspect element)并使用完全相同的声明，然后它将被覆盖。

我花了一点时间才想明白。

2017-11-25 10:21:03

使用jquery css而不是css…Jquery有优先级比bootstrap css…

e.g

$(document).ready(function(){
        $(".mnu").css({"color" : "#CCFF00" , "font-size": "16px" , "text-decoration" : "overline"});    


);

 instead of

.mnu
{

font-family:myfnt;
font-size:20px;
color:#006699;

}

2017-05-29 02:04:24

给ID图例和应用css。像添加id hello到legend()， css如下:

#legend  legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 20px;
  font-size: 21px;
  line-height: inherit;
  color: #333333;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}

2018-05-25 07:10:44