Die Standardhöhe des Fortschrittsbalkens ist zu viel

Ich mache einen Fortschrittsbalken. Ich finde den Standard height des Fortschrittsbalkens bootstrap.js ist zu viel. Also versuche ich, die height zu 20% wie folgt zu reduzieren.Die Standardhöhe des Fortschrittsbalkens ist zu viel

Aber es ändert nicht, was ich will. Weiß jemand, welches Attribut ich ändern sollte?

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <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> 
    <style> 
    .progress-bar { 
     height: 20%; 
     line-height: 2px; } 
    </style> 
</head> 
<body> 
<div class="container"> 
    <h2>Animated Progress Bar</h2> 
    <p>The .active class animates the progress bar:</p> 
    <div class="progress"> 
    <div id="abc" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"></div> 
    </div> 
</div> 
</body> 
</html>

Hier ist JSBin

Quelle

2016-07-01 SoftTimur

Was passiert? – Rayon

Nur die Höhe des .progress gesetzt - nicht .progress-bar:

.progress { 
    height: 5px; /* needs to be an absolute measurement unless one of it's parent has an absolute height */ 
}

Updated bin

Quelle

2016-07-01 10:12:08 Pete

/* not .progress-bar */ 
.progress { 
     height: 10px; 
     line-height: 2px; 
}

Quelle

2016-07-01 10:11:46

Sie externe Bibliotheken verwenden Bootstrap zu verknüpfen. So wird extern nach intern geladen und hat Priorität, manchmal auch Vorrang vor HTML-Styling. Sie müssen einen genauesten Selektor verwenden wie

div.container > div.progress > div#abc {/* Styles That you want */}

Quelle

2016-07-01 10:20:01 JoelBonetR

Die Standardhöhe des Fortschrittsbalkens ist zu viel

Antwort

Verwandte Themen