CSS Bootstrap Override方法
[英]css bootstrap override method
问题描述
这是我实现简单日记日的方法：
<div class="panel panel-primary">
<div class="panel-heading">June</div>
<div class="panel-body">
25
<br>
<span class="glyphicon glyphicon-time"></span>
</div>
</div>
这是CSS代码：
.panel{
border-color:#EEEEEE !important;
width: 150px;
}
.panel > .panel-heading {
background-color: greenyellow;
color: white;
height: 40px;
text-align: center;
border-color:black !important;
font-size: 20px;
}
.panel> .panel-body{
text-align: center;
font-family: "Comic Sans MS";
font-size: 35px;
}
.glyphicon{
font-size: 20px !important;
text-align: left !important;
}
我想要的是在左对齐glyphicon，但是由于嵌套在面板主体（居中对齐）的位置，所以这不可能发生。 即使我尝试了“！重要”。
欢迎任何帮助
1 个解决方案
解决方案1
1 已采纳 2017-02-19 09:50:29
只需将其带到class="panel-body"之外即可。
工作实例
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style type="text/css"> .panel{ border-color:#EEEEEE !important; width: 150px; } .panel > .panel-heading { background-color: greenyellow; color: white; height: 40px; text-align: center; border-color:black !important; font-size: 20px; } .panel> .panel-body{ text-align: center; font-family: "Comic Sans MS"; font-size: 35px; } .glyphicon{ font-size: 20px !important; text-align: left !important; } </style> </head> <body> <div class="panel panel-primary"> <div class="panel-heading">June</div> <div class="panel-body"> 25 <br> </div> <span class="glyphicon glyphicon-time"></span> </div> </body> </html>
希望这会有所帮助！
无法使用CSS覆盖引导程序
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.