Question

我有一个关于覆盖bootstrap css的问题。我想使用我的所有风格，背景，媒体等。我已经回顾了相关的问题和答案，每个人都说我在这样的bootstrap core css后加载我的css。

 <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/mystyle.css" rel="stylesheet">

然后例如我想在我的换行垫部分中放置一个背景。

.service .wrap-pad {
    background-image: url(../background/booksground.png);
    background-repeat: no-repeat;
    -webkit-filter: none;
    -o-filter: none;
    filter: none;
}

在我这样做之后没有任何事情发生，更进一步我无法覆盖任何样式或将其中的媒体放入其中，我试图用导航栏，页脚等进行此操作。一切看起来都很简单，标准的引导样式。我正在使用small-business theme，来自startbootstrap.com，bootstrap 3.2.2，然后我用一些包装垫动画和轮播修改它以满足我的需要。我怎样才能克服这个并开始使用我的风格。坦克你。

Answer 1

您的重写样式选择器必须与Bootstrap选择器一样具体或更具体。此外，正如您所说，您的自定义样式需要在您覆盖的样式之后显示。

例如，这是默认bootstrap.css中的一些CSS：

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background-color: #e8e8e8;
  background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
  background-image:      -o-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e8e8e8));
  background-image:         linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
  background-repeat: repeat-x;
}

我用这个CSS在custom.css中覆盖它：

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    color: inherit;
    text-decoration: none;
    background-color: #eeeeee;
    border-left: 2px solid #4285f4;
    padding-left: 18px; 
}

Answer 2

CSS的工作原理如下..

1 链接文件

2 内部代码

3 内嵌标记

这就是说..内联总是覆盖内部和链接，而内部（同一页）总是从外部覆盖css .. 所以既然bootstrap有外部导入的css，其他两个选项应该覆盖它。

希望这有助于。

Answer 3

只需编写一个样式，例如

.any{
   background: any-color
}

并在您的代码中添加任意类

<div class='class-1 class-2 class-3 any'>

由于所有类都是级联应用（想想看台'css'），所以最后一个类会覆盖其他样式。

覆盖Bootstrap css？

3 个答案: