Question

我试图让jQuery UI进度条显示为内联，因此输出应为：

完成百分比：{{progressbar}} 25％

我尝试过以下各种变化而没有运气（当我把所有东西放在它自己的div中时，我真的认为它会起作用）：

我明白了：

完成百分比： {{进度条}} 25％

<p id="percent-complete" class="status" style="display:inline;">

Percent Complete: 

</p>
<div id="progress-container" style="width:125px; display:inline">

<div id="progress" class="ui-progressbar ui-widget ui-widget-content ui-corner-all" style="height:10px;      width:100px;" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="25"></div>
<span id="complete-text" class="status-update" style="display:inline;"></span>

</div>

是否有某些原因导致您无法在线显示进度条？我在这里错过了一些东西吗？这种情况有什么需要做的吗？谢谢你的帮助。

Answer 1

将display: inline-block添加到进度条div。

jsfiddle示例：http://jsfiddle.net/m2nDG/

Answer 2

您可能正在使用Bootstrap 2并使用Bootstrap 3的样式/类，反之亦然。如果您使用Bootstrap 2或Bootstrap 3样式/类用于Bootstrap 3，请使用Bootstrap 2样式用于渐进式栏。

Bootstrap 2风格：

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

有关详细信息，请查看此链接：http://getbootstrap.com/components/

Bootstrap 3风格：

<div class="bs-component">
       <div class="progress progress-striped active">
          <div style="width: 45%" class="progress-bar"></div>
       </div>
    <div class="btn btn-primary btn-xs" id="source-button" style="display: none;">&lt; &gt;</div></div>

有关详细信息，请查看此链接：http://bootswatch.com/cerulean/

另一个事实是你也可能缺少jQuery-UI，js和css。请尝试通过以下cdn附加：

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" /> 
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>

无法显示内联进度条

2 个答案: