CSS-Bootstrap-Überschreibung Methode

Das ist mein Ansatz ein einfaches Tagebuch Tag zu implementieren:CSS-Bootstrap-Überschreibung Methode

<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>

und hier ist der CSS-Code:

.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; 
}

Was ich will, ist die glyphicon auf der linken Seite ausrichten , aber wegen der Verschachtelung zu Panel-Body, welche Ausrichtung ist Center, kann dies nicht passieren. Selbst wenn ich "! Wichtig" versuchte.

Jede Hilfe ist willkommen

Quelle

2017-02-19 George

es gerade außerhalb class="panel-body" bringen, die den Trick tun wird.

Arbeitsbeispiel

<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>

` hoffe, das hilft!

Quelle

2017-02-19 09:50:29 neophyte

es tut! Schnell und einfach. Vielen Dank! – George

CSS-Bootstrap-Überschreibung Methode

Antwort

Verwandte Themen