Question

我使用less定制bootstrap。我想为.navbar添加一个阴影。我的解决方案如下：

   //Import of bootstrap core navbar - second as to save specificity 
   @import "bootstrap/navbar.less";    

   //Overrides:
   .navbar {
      position: relative;
      min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
      margin-bottom: @navbar-margin-bottom;
      border: 1px solid transparent;
      border-bottom: 1px solid #FFF;

      -moz-box-shadow: 0px 3px 10px #888;
      -webkit-box-shadow: 0px 3px 10px #888;
      box-shadow: 0px 3px 10px #888;

      //Prevent floats from breaking the navbar
      &:extend(.clearfix all);

      @media (min-width: @grid-float-breakpoint) {
      border-radius: @navbar-border-radius;
      }
   }

这样我就不会修改bootstraps原始源代码，并且很容易更新bootstrap，但是新的navbar类比所有引导类都具有更高的特异性。以下是：

<div id="navigationbar" class="navbar navbar-default navbar-static-top" ng-cloak ng-controller="NavController">

导航栏边界半径将覆盖navbar-static-top，结果是圆角。

如果我在定义自己的类后导入bootstrap / navbar.less它确实有效。但是有更好的解决方案吗？

Answer 1

我想知道你的问题是否真的与CSS特异性有关。您将从上到下阅读更少的代码（仅适用于上次声明获胜的变量）。

Bootstrap首先定义.navbar类，然后定义样式类（.navbar-default）和位置类（.navbar-static-top）。

当.navbar-default覆盖.navbar类的某些样式时，您可以通过在.navbar之后再次定义.navbar-default类来撤消此覆盖。

据我所知，您只需要以下Less / CSS代码：

 .navbar.navbar-default {
      -moz-box-shadow: 0px 3px 10px #888;
      -webkit-box-shadow: 0px 3px 10px #888;
      box-shadow: 0px 3px 10px #888;
 }

演示：http://www.bootply.com/VhEmBcAYhY

因为Bootstrap导航栏类根本没有声明box-shadow属性，您可以在Less代码中的任何位置添加此代码。

这个代码似乎在bootstrap.less甚至navbar.less结束时的位置很好。或者创建一个custom.less文件，并在bootstrap.less结束时导入它。

Answer 2

我发现最简单的事情，这就是我们工作的地方，就是不使用Bootstrap LESS文件，而是使用缩小的CSS。由于您只是覆盖Bootstrap样式，而不是更改源样式，因此它将更容易。

使用LESS，因为你在样式中嵌套样式，你会发现如果样式没有完全像Bootstrap那样嵌套（因为你试图覆盖它们），那么它们的样式可能更具体，因此，优先考虑你的风格。

使用less时覆盖bootstrap时的特异性

2 个答案: