javascript - text-left !important 在按钮内部不起作用
问题描述
我确实有一些使用引导程序的输入按钮,我遇到的问题是即使在 .text-left 类上我添加了 !important,它也不能在按钮上工作。
我们如何解决这个问题?
.text-left {
text-align: left !important;
}
.btn {
box-shadow: none;
border-radius: 0;
}
.w100 {
width: 100%;
}
.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
}
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
a {
color: #72c02c;
text-decoration: none;
}
a {
color: #337ab7;
text-decoration: none;
}
<link href="https://www.sp-batiment.com/assets/plugins/bootstrap/css/bootstrap.css" rel="stylesheet"/>
<div> <div class="text-left"> <a href="blog/immobilier.html"> <btn class=" btn btn-default w100 "><i class="fa fa-building-o "></i> <strong>Immobilier (4)</strong></btn> </a> <a href="blog/entretien.html"> <btn class=" btn btn-default w100 "><i class="fa fa-wrench "></i> <strong>Entretien (2)</strong></btn> </a> <a href="blog/tendances-deco.html"> <btn class=" btn btn-default w100 "><i class="fa fa-file-image-o "></i> <strong>Tendances déco (9)</strong></btn> </a> <a href="blog/actualite.html"> <btn class=" btn btn-default w100 "><i class="fa fa-file-text-o "></i> <strong>Actualité (7)</strong></btn> </a> <a href="blog/technologies.html"> <btn class=" btn btn-default w100 "><i class="fa fa-cogs "></i> <strong>Technologies (5)</strong></btn> </a> <a href="blog/renovations.html"> <btn class=" btn btn-default w100 "><i class="fa fa-hotel "></i> <strong>Rénovations (12)</strong></btn> </a> <a href="blog/divers.html"> <btn class=" btn btn-default w100 "><i class="fa fa-puzzle-piece "></i> <strong>Divers (7)</strong></btn> </a> <a href="blog/videos-renovations.html"> <btn class=" btn btn-default w100 "><i class="fa fa-film "></i> <strong>Vidéos de rénovations (3)</strong></btn> </a> <a href="blog/ameliorations-energetiques.html"> <btn class=" btn btn-default w100 "><i class="fa fa-calculator "></i> <strong>Améliorations énergétiques (3)</strong></btn> </a> </div> </div>
我知道这个帖子已经看过几次了,但我没有找到任何真正的回应。
解决方案
不需要!important
-> 只需.text-left btn {
用作选择器。
.text-left btn {
text-align: left;
}
.btn {
box-shadow: none;
border-radius: 0;
}
.w100 {
width: 100%;
}
.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
}
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
a {
color: #72c02c;
text-decoration: none;
}
a {
color: #337ab7;
text-decoration: none;
}
<link href="https://www.sp-batiment.com/assets/plugins/bootstrap/css/bootstrap.css" rel="stylesheet"/>
<div> <div class="text-left"> <a href="blog/immobilier.html"> <btn class=" btn btn-default w100 "><i class="fa fa-building-o "></i> <strong>Immobilier (4)</strong></btn> </a> <a href="blog/entretien.html"> <btn class=" btn btn-default w100 "><i class="fa fa-wrench "></i> <strong>Entretien (2)</strong></btn> </a> <a href="blog/tendances-deco.html"> <btn class=" btn btn-default w100 "><i class="fa fa-file-image-o "></i> <strong>Tendances déco (9)</strong></btn> </a> <a href="blog/actualite.html"> <btn class=" btn btn-default w100 "><i class="fa fa-file-text-o "></i> <strong>Actualité (7)</strong></btn> </a> <a href="blog/technologies.html"> <btn class=" btn btn-default w100 "><i class="fa fa-cogs "></i> <strong>Technologies (5)</strong></btn> </a> <a href="blog/renovations.html"> <btn class=" btn btn-default w100 "><i class="fa fa-hotel "></i> <strong>Rénovations (12)</strong></btn> </a> <a href="blog/divers.html"> <btn class=" btn btn-default w100 "><i class="fa fa-puzzle-piece "></i> <strong>Divers (7)</strong></btn> </a> <a href="blog/videos-renovations.html"> <btn class=" btn btn-default w100 "><i class="fa fa-film "></i> <strong>Vidéos de rénovations (3)</strong></btn> </a> <a href="blog/ameliorations-energetiques.html"> <btn class=" btn btn-default w100 "><i class="fa fa-calculator "></i> <strong>Améliorations énergétiques (3)</strong></btn> </a> </div> </div>
推荐阅读
- python - 在 Python 中,如何在四个随机数上设置两个负数和两个正数并等于 0?
- react-native - FlatList ref scrollToIndex 不是函数
- powershell - Powershell函数未接收参数
- php - Wordpress ajax 请求无法正常工作
- swift - 保存表格视图单元格
- php - 在 laravel 警报中,视图页面中不起作用
- kubernetes - 无法在入口资源中加载静态内容
- c - 由两个 3 位数字的乘积构成的最大回文数。在我的代码中使用 c .whats 错误?
- sql - 通过 SQL Server 中的存储过程插入 unicode 数据
- shell - 如何在 Hadoop HDFS 中删除多级分区