Question

我正在制作进度条。我发现height的进度条的默认bootstrap.js太多了。因此，我尝试将height缩减为20%，如下所示。

但它并没有改变我想要的东西。有谁知道我应该修改哪个属性？

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

这是JSBin

Answer 1

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

Answer 2

只需设置.progress的高度 - 而不是.progress-bar：

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

Updated bin

Answer 3

您正在使用外部库来链接引导程序。因此外部将在内部加载并优先，有时优先于html样式。您必须使用最准确的选择器，如

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

进度条的默认高度太大

3 个答案: