堆栈内存溢出
  简体   繁体   English

进度条将不会显示

[英]Progress bar will not display

 原文  2018-03-10 14:52:55  7   3    javascript/ css/ twitter-bootstrap

问题描述

I just want to add a progress bar to my page and I cannot even get it to display! 我只是想在我的页面中添加一个进度条，我甚至无法显示它！ I stripped the website down to a bare minimum to try to isolate what could but can't figure it out! 我把网站剥离到最低限度，试图找出可能但却无法解决的问题！ I was thinking it was my custom css file I created, but I removed it and the issue persisted. 我以为这是我创建的自定义css文件，但我删除了它，问题仍然存在。 

 <!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <title>STEMuli Explore</title> </head> <body> <div class="row h-100 justify-content-center"> <a name="redirectHome" onClick="redirectHome()"><img src="/img/logo.png" class="img-fluid" width="100" height="100" alt="Responsive image"> </a> </div> <div class="container-fluid"> <div class="row align-items-center"> <div class="col-6"> <a href="#" name="redirectCreate" onClick="redirectCreate()"> <h1 class="text-center"> Create</h1> </a> </div> <div class="col-6 text-center"> <a href="#" name="redirectExplore" onClick="redirectExplore()"> <h1 class="text-center"> Explore</h1> </a> </div> </div> <div class="row h-100 justify-content-center"> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script type="text/javascript" src="/js/redirect.js"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <!--Logical JS files--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </body> </html>

3 个解决方案

解决方案1
 2 已采纳  2018-03-10 17:19:40

Remove the class row from the parent div containing the progress bars. 从包含进度条的父div中删除类row 。 

 <!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <title>STEMuli Explore</title> </head> <body> <div class="row h-100 justify-content-center"> <a name="redirectHome" onClick="redirectHome()"><img src="/img/logo.png" class="img-fluid" width="100" height="100" alt="Responsive image"> </a> </div> <div class="container-fluid"> <div class="row align-items-center"> <div class="col-6"> <a href="#" name="redirectCreate" onClick="redirectCreate()"> <h1 class="text-center"> Create</h1> </a> </div> <div class="col-6 text-center"> <a href="#" name="redirectExplore" onClick="redirectExplore()"> <h1 class="text-center"> Explore</h1> </a> </div> </div> <div class="h-100 justify-content-center"> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script type="text/javascript" src="/js/redirect.js"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <!--Logical JS files--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </body> </html>

解决方案2
 1  2018-03-10 17:27:55

This is likely due to a misunderstanding of the way the Bootstrap 4 grid system works. 这可能是由于对Bootstrap 4网格系统工作方式的误解。

Here's some tips for solving this specific issue, as well as issues in the future. 以下是解决此特定问题以及未来问题的一些提示。

See the snippet below, which works: 请参阅下面的代码段，其中有效：

  1. May I suggest you read the Bootstrap 4 grid docs , and you'll discover that this is all based on flex, so you either need to remove .row , add .col , or make other alterations to get the layout you are looking for. 我建议您阅读Bootstrap 4网格文档 ，您会发现这都是基于flex的，因此您需要删除.row ，添加.col或进行其他更改以获得您正在寻找的布局。
  2. In the working snippet below, you'll notice I put "border" styles on the progress bars. 在下面的工作片段中，您会注意到我在进度条上放置了“边框”样式。 This is a troubleshooting technique that can show you immediately what is going on (when I did with your code, all the progress bars were tiny-narrow, stacked tightly against each other horizontally). 这是一种故障排除技术，可以立即向您显示正在进行的操作（当我对您的代码执行操作时，所有进度条都是非常窄的，水平紧密地堆叠在一起）。
  3. In the snippet below, I dramatically simplified the code. 在下面的代码段中，我大大简化了代码。 This is a practice for isolating the problem - simplify until it's just the one issue / item, solve it, then you can bake that back into your big-picture plan. 这是一种隔离问题的做法 - 简化直到它只是一个问题/项目，解决它，然后你可以把它烘焙回你的大画面计划。
  4. Leverage the browser's developer tools and inspect the elements. 利用浏览器的开发人员工具并检查元素。 Doing so reveals tons about what is going on. 这样做揭示了关于正在发生的事情吨 。 It's an essential tool in any web developer's toolkit, so learn it, master it. 它是任何Web开发人员工具包中必不可少的工具，因此要学习它，掌握它。 It is your friend! 这是你的朋友！ 

 .progress { border: 1px solid red; } .progress-bar { border: 2px solid black; } 
 <!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <title>STEMuli Explore</title> </head> <body> <div class="container"> <div>Borders added to illustrate a troubleshooting technique</div> <div class="row h-100 justify-content-center"> <div class="col"> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> </div> <div class="row"> <div class="col"> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> </div> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script type="text/javascript" src="/js/redirect.js"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <!--Logical JS files--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </body> </html>

解决方案3
 0  2018-03-10 17:13:57

The containing div class row h-100 probably expects a blocky content. 包含div类的row h-100可能需要一个块状内容。 I am not too familiar with bootstrap4, but in bootstrap3, there is this concept of col-md-12 ... wrap the progress bar by div with class col-lg or something? 我对bootstrap4不太熟悉，但是在bootstrap3中，有一个col-md-12概念...用div col-lg或者div来包装进度条吧？ 

<div class="row h-100 justify-content-center">
  <div class = "col-lg">
    <div class="progress">
      <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
  </div>
</div>

ps ctrl shift i is your friend ps ctrl shift i是你的朋友

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 动画进度条文本显示 - Animated progress bar text display 在gulp流中显示进度条 - Display progress bar in a gulp stream 显示进度条vue flask - Display progress bar vue flask 在进度栏中显示音频名称 - Display audio name in progress bar 上传 excel 文件时显示进度条 - Display Progress Bar when upload excel file 导出CSV和Javascript并显示进度条 - Export CSV with Javascript and display progress bar 我可以在进度条中显示 $timeout 值吗？ - Can I display $timeout value in progress bar? 如何将进度条宽度显示为小数？ - How to display progress bar width as decimal? 在多个元素中滚动显示进度条 - Display progress bar as scroll in multiple elements 显示进度条，直到页面加载到PHP？ - Display progress bar until page load in php?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM