CSS Bootstrap overrides my own CSS

后端未结

关注

 9  1229

I am trying to create a split-button in my website (ASPNET WebForms). So far the only split-button implementation I like is the one from Bootstrap. I am not using any other feat

相关标签:

9条回答

不思量自难忘°

2021-02-07 14:16
As they said before, the bootstrap css importation must be before the custom css. Like this:
```
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" >
<link rel="stylesheet" href="css/styles.css">
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
醉话见心

2021-02-07 14:16

use '!important' after your css value, for example :

pre { white-space: pre-wrap !important; }

0 讨论(0)
发布评论:

提交评论
- 加载中...
情书的邮戳

2021-02-07 14:17

make your stylesheet the last imported css file.

0 讨论(0)
发布评论:

提交评论
- 加载中...
鱼传尺愫

2021-02-07 14:23
As mentioned in the other solutions on this page, there are ways like:
1. Creating a custom bootstrap css from the bootstrap website
2. Placing your custom styles that you do not want bootstrap to override, after the bootstrap style tags on the page
According to my experience, creating a custom bootstrap css or editing it to remove unrequired classes or style-rules is not so practical. This is because when a newer version of bootstrap is out, you might need to go through the cumbersome procedure again.

Instead, you could go ahead with overriding the bootstrap styles with your own styles, placed after the bootstrap styles, with another step that will more effectively help you to prevent others from overriding your styles.

You can have a look at specificity of CSS styles at http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ or https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

One example could be, writing a style
```
.btn {
    background: red;
}
```
as
```
#mypage .btn {
    background: red;
}
```
where, mypage could be an ID of a parent-most element on the page (may be the body tag?). This would make your style rules more specific than the ones that are defined in the bootstrap CSS, they will no longer be able to override yours then.

Please note that the above code snippet is just an illustration, and you could definitely write better styles for the cause.
0 讨论(0)
发布评论:

提交评论
- 加载中...
甜味超标

2021-02-07 14:24
I'm not sure if this will answer your question exactly but what I do in all my BS 3 projects is:

In my header:
```
<link rel="stylesheet" href="custom.css">
```
In custom.css
```
@import boostrap.less // or the fully compiled bootstrap css
// all your custom stuff, overrides, etc. down here
```
This way we load up boostrap first but anything custom you want to do will be loaded last meaning your chances of overriding are high and won't cause conflicts. Also it's one line and a lot cleaner for your <head>
0 讨论(0)
发布评论:

提交评论
- 加载中...

失恋的感觉

2021-02-07 14:32

A lot of people are talking about adding your custom css after bootstrap. Typically it seems this works, however, I've come across a time, when using the .modal class where it appears to reload the bootstrap overtop my custom css. I don't (yet) know why. In that case I have worked around the problem by either creating a class for my element in my css (and changing my html to use that class) which makes my css more specific/narrowly defined and therefore takes precedence, or by using !important, as mentioned by @kder.

So, try the order, and if for some reason that doesn't work, you have to find a way to force your css to be more specifically targetted or use !important.

Example (code snipped for brevity). In this code I have bootstrap css followed by my tripper.css. If I remove the code at the bottom with class="modal", this works and my body is formatted according to the css in tripper.css. If I leave the modal code at the bottom, I have to add !important to the body selector.

tripper.css

body {
  background-color:#00aaff;
}

html

<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<head>
<title>Gear Closet</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<link rel="stylesheet" href="/css/tripper.css">

</head>

<body>
  <div th:replace="fragments.html :: header"></div>
  <div th:replace="fragments.html :: navigation"></div>

  <div class="jumbotron text-center">
...
  </div>

  <div class="jumbotron text-center">
...
  </div>

  <!-- The Modal -->
  <div class="modal" id="importModal">
    <div class="modal-dialog">
      <div class="modal-content">

        <!-- Modal Header -->
        <div th:replace="fragments.html :: modalHeader(title=#{gear.import.title})"></div>
        
        <!-- Modal body -->
        <div class="modal-body">
          <div th:replace="fragments.html :: loadFile"></div>
        </div>

        <!-- Modal footer -->
        <div th:replace="fragments.html :: modalFooter"></div>
      </div>
    </div>
  </div>
  
  <div class="modal" id="addToBinModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <!-- Modal Header -->
        <div th:replace="fragments.html :: modalHeader(title=#{gear.addToBin.title})"></div>

        <!-- Modal Footer -->
        <div class="modal-footer">
          <label for="addGearBtn" class="btn btn-primary" th:text="#{navigate.add}">??navigate.add??</label>
          <label class="btn btn-danger" data-dismiss="modal" th:text="#{navigate.close}">??navigate.close??</label>
        </div>
      </div>
    </div>
  </div>

  <div class="modal" id="createBinModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <!-- Modal Header -->
        <div th:replace="fragments.html :: modalHeader(title=#{gear.createBin.title})"></div>
        



      </div>
    </div>
  </div>
</body>
</html>

0 讨论(0)

1 2 下一页