Question

这是我实施简单日记日的方法：

<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，但由于嵌套到面板体，哪个对齐是中心，这不可能发生。即使我尝试了＃34;！important＆＃34;。

欢迎任何帮助

Answer 1

将它带到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 bootstrap覆盖方法

1 个答案: