18910140161

Bootstrap设置了padding我在CSS里怎么修改呢?

顺晟科技

2021-10-06 12:39:34

152

导入BootStrap的container-fluid后想在CSS中修改padding,但是修改无效,打开F12显示padding左右已经被默认设置成…

重设此选择器把bootstrap的覆盖掉

bootstrap用sass写的,改个variable就行了

参见

Sass

至于container那一系列,看这个

bootstrap/_container.scss at main · twbs/bootstrap

要是不想重新编译,用css variable也能定制

CSS variables

一般不建议直接用原装的bootstrap的,好歹也用sass定制一下自己的主题色

不然也太同质化了

2021年了让人隔着500m一眼认出你这是原装bootstrap很寒碜的

当然了要是你能够确定就需要改这一处,用CSS也倒是能凑和

最简单的方式是加 !important

.container-fluid { padding: 20px !important;}

当然这种方式不太优雅, 尽量不要使用. 可以考虑使用 css 的顺序和优先级. 比如额外添加一个 class 名, 然后通过多个 class 去设置样式

.my-container .container-fluid.my-padding { padding: 20px;}

css 优先级是一个比较复杂的地方, 其中 id 选择器优先级会乘上 1000, 相当于一个 id 选择器需要1000 个 class 选择器才能追平优先级. 其他相关的优先级可以查阅文档去学习

我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航