如何覆盖引导CSS样式?我需要修改bootstrap.css适合我的网站。我觉得最好是分开custom.css文件而不是修改bootstrap.css直接原因之一是bootstrap.css得到一个更新,我将痛苦尝试重新-包括我的所有修改。我会为这些样式牺牲一些加载时间,但对于我要覆盖的少数样式来说,这是可以忽略不计的。我要重写吗bootstrap.css所以我移除锚/类的风格?例如,如果我想删除legend:legend {
display: block;
width: 100%;
padding: 0;
margin-bottom: 20px;
font-size: 21px;
line-height: inherit;
color: #333333;
border: 0;
border-bottom: 1px solid #e5e5e5;}我可以删除所有这些bootstrap.css但是,如果我对覆盖CSS的最佳实践的理解是正确的,那么我应该做什么呢?为了清楚起见,我想删除所有的图例样式,并使用父级的CSS值。那么,结合Pranav的回答,我会做以下工作吗?legend {
display: inherit !important;
width: inherit !important;
padding: inherit !important;
margin-bottom: inherit !important;
font-size: inherit !important;
line-height: inherit !important;
color: inherit !important;
border: inherit !important;
border-bottom: inherit !important;}(我希望有一种方法可以这样做:)legend {
clear: all;}
3 回答

catspeake
TA贡献1111条经验 获得超0个赞
!important
身份证100分 类和伪类10分 标记选择器和伪元素的1点 注意:如果元素具有内联样式 (1000点)
<body id="bootstrap-overrides">
/* Example selector defined in Bootstrap */.jumbotron h1 { /* 10+1=11 priority scores */ line-height: 1; color: inherit;}/* Your initial take at styling */h1 { /* 1 priority score, not enough to override Bootstrap jumbotron definition */ line-height: 1; color: inherit;}/* New way of prioritization */#bootstrap-overrides h1 { /* 100+1=101 priority score, yay! */ line-height: 1; color: inherit;}

元芳怎么了
TA贡献1798条经验 获得超7个赞
始终在基本CSS文件之后加载自定义CSS(不响应)。 避免使用 !important
如果可能的话。它可以覆盖基本CSS文件中的一些重要样式。 如果不想丢失媒体查询,请始终在custom.css之后加载引导-responsive.css。-必须跟随 更喜欢修改所需的属性(不是全部)。
- 3 回答
- 0 关注
- 859 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消