首页 文章

如何覆盖Bootstrap CSS样式?

提问于
浏览
186

我需要修改 bootstrap.css 才能适合我的网站 . 我觉得最好创建一个单独的 custom.css 文件而不是直接修改 bootstrap.css ,其中一个原因是 bootstrap.css 应该获得更新,我会为这些样式牺牲一些加载时间,但它会覆盖's negligible for the few styles I'm .

我是否重写 bootstrap.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;
}

我可以删除 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;
}

10 回答

  • 16

    将custom.css文件链接为bootstrap.css下面的最后一个条目 . Custom.css样式定义将覆盖bootstrap.css

    HTML

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">
    

    复制custom.css中图例的所有样式定义并对其进行更改(如margin-bottom:5px; - 这将覆盖margin-bottom:20px;)

  • 3

    我发现(bootrap 4)将你的onss css放在bootstrap.css and .js 后面是最好的解决方案 .

    找到你想要改变的项目(检查元素)并使用完全相同的声明,然后它将覆盖 .

    我花了一些时间才弄明白这一点 .

  • 71

    有点晚了,但我做的是我在根 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>
    
  • 405

    使用 !important 不是一个好选择,因为您将来很可能想要覆盖自己的样式 . 这让我们有了CSS的优先事项 .

    基本上,每个选择器都有自己的数字“权重”:

    • ID为100分

    • 类和伪类的10分

    • 1个标签选择器和伪元素

    在两种选择器样式中,浏览器总是会选择权重更大的选择器 . 样式表的顺序仅在优先级均匀时才有意义 - 这就是为什么覆盖Bootstrap并不容易 .

    您可以选择检查Bootstrap源,了解如何定义某些特定样式,并复制该选择器以使您的元素具有相同的优先级 . 但是我们在这个过程中放松了所有的Bootstrap甜味 .

    解决此问题的最简单方法是为页面上的一个根元素分配其他任意ID,如下所示: <body id="bootstrap-overrides">

    这样,您可以使用您的ID为任何CSS选择器添加前缀,立即向该元素添加100个权重点,并覆盖Bootstrap定义:

    /* Example selector defined in Bootstrap */
    .jumbotron h1 { /* 10+1=11 priority scores */
      line-height: 1;
      color: inherit;
    }
    
    /* Your initial take at styling */
    h1 { /* 1 priority score, not enough to override Bootstrap jumbotron definition */
      line-height: 1;
      color: inherit;
    }
    
    /* New way of prioritization */
    #bootstrap-overrides h1 { /* 100+1=101 priority score, yay! */
      line-height: 1;
      color: inherit;
    }
    
  • 26

    要重置在bootstrap中为 legend 定义的样式,可以在css文件中执行以下操作:

    legend {
      all: unset;
    }
    

    参考:https://css-tricks.com/almanac/properties/a/all/

    CSS中的all属性重置所有选定元素的属性,但控制文本方向的direction和unicode-bidi属性除外 .

    可能的值为: initialinheritunset .

    附注: clear 属性与 floathttps://css-tricks.com/almanac/properties/c/clear/)有关

  • 2

    使用jquery css而不是css . . . jquery优先于bootstrap css ...

    例如

    $(document).ready(function(){
            $(".mnu").css({"color" : "#CCFF00" , "font-size": "16px" , "text-decoration" : "overline"});    
    
    
    );
    
     instead of
    
    .mnu
    {
    
    font-family:myfnt;
    font-size:20px;
    color:#006699;
    
    }
    
  • 1

    它不应该影响加载时间,因为你要覆盖基本样式表的一部分 .

    以下是我个人遵循的一些最佳做法:

    • 始终在基本CSS文件之后加载自定义CSS(无响应) .

    • 如果可能,请避免使用 !important . 这可以覆盖基本CSS文件中的一些重要样式 .

    • 如果您不想丢失媒体查询,请始终在custom.css之后加载bootstrap-responsive.css . - 必须遵循

    • 首选修改所需属性(不是全部) .

  • -5

    为传奇提供ID并应用css . 就像向legend()添加id hello一样,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;
    }
    
  • -1

    如果您计划进行任何相当大的更改,最好直接在引导程序中进行更改并重建它 . 然后,您可以减少加载的数据量 .

    有关构建指南,请参阅Bootstrap on GitHub .

  • -2

    在你的html的head部分,你的custom.css位于bootstrap.css下面 .

    <link href="bootstrap.min.css" rel="stylesheet">
    <link href="custom.css" rel="stylesheet">
    

    然后在custom.css中,您必须为要覆盖的元素使用完全相同的选择器 . 在 legend 的情况下,它只是在custom.css中保留 legend ,因为bootstrap没有任何更具体的选择器 .

    legend {
      display: inline;
      width: auto;
      padding: 0;
      margin: 0;
      font-size: medium;
      line-height: normal;
      color: #000000;
      border: 0;
      border-bottom: none;
    }
    

    但是在例如 h1 的情况下,你必须照顾更具体的选择器,如 .jumbotron h1 因为

    h1 {
      line-height: 2;
      color: #f00;
    }
    

    不会覆盖

    .jumbotron h1,
    .jumbotron .h1 {
      line-height: 1;
      color: inherit;
    }
    

    以下是对css选择器特异性的有用解释,您需要了解这些解释器以确切了解哪些样式规则将应用于元素 . http://css-tricks.com/specifics-on-css-specificity/

    其他一切只是复制/粘贴和编辑样式的问题 .

相关问题