如何移除Bootstrap v4.3.1中特定类ol元素的默认内联起始边距?
如何移除特定类
<ol>元素的Bootstrap默认左内边距? 你的问题核心是CSS选择器匹配错误,导致样式没有作用到目标<ol>元素上。
1. 修正CSS选择器
你写的.myclass ol表示“选中所有拥有myclass类的元素内部的<ol>标签”,但你的HTML里myclass是直接加在<ol>本身上的,所以应该直接选中带myclass类的<ol>:
ol.myclass { list-style-type: none; padding-inline-start: 0; padding-left: 0; /* 兼容不支持padding-inline-start的老浏览器 */ }
如果myclass只会用在<ol>上,也可以简化成:
.myclass { list-style-type: none; padding-inline-start: 0; padding-left: 0; }
2. 确保CSS加载顺序
你的自定义CSS文件必须在Bootstrap的CSS文件之后引入,这样你的样式才能覆盖Bootstrap的默认规则。如果加载顺序反了,Bootstrap的样式会优先生效。
3. 优先级兜底方案(不推荐滥用)
如果上述方法还是不生效,说明Bootstrap的选择器优先级比你的高,可以通过提升选择器特异性或者临时使用!important强制覆盖:
/* 提升选择器特异性,比如加上父容器类(假设父容器有container类) */ .container ol.myclass { list-style-type: none; padding-inline-start: 0; padding-left: 0; } /* 应急用的!important方案 */ ol.myclass { list-style-type: none; padding-inline-start: 0 !important; padding-left: 0 !important; }
内容的提问来源于stack exchange,提问作者user2470889189
相关产品推荐
相关产品推荐

