Angular UI bootstrap 进度条最小宽度
Angular UI bootstrap progressbar minimum width
我正在尝试设置 angular UI bootstrap 进度条的最小宽度。我检查了文档，他们没有提到如何做到这一点。我知道 'regular' bootstrap 你可以使用像 style="min-width: 10em;" 这样的东西。但是，这仅在您将其包装在标准进度 bootstrap div 中时才有效，如下所示：
<div class="progress">
<uib-progressbar class="progress-striped active progress-bar" value="value" style="min-width: 10em;">
<span> text </span></uib-progressbar>
</div>
但是这会显示一个没有 'active' 动画的进度条，因为常规 bootstrap 不支持这个。当我这样尝试时，它不会设置最小宽度 属性
<uib-progressbar class="progress-striped active progress-bar"value="value" style="min-width: 10em;">
<span> text </span>
</uib-progressbar>
编辑： 我忽略了 'regular' bootstrap 文档中的动画部分。但是，如果可能的话，我想使用 UI bootstrap 进度条。
常规 Bootstrap supports 动画进度条。
您确定您正确导入了 Boostrap 文件吗？我想你可能只包含了 CSS 文件而不是 JS。查看 basic template 以了解应包含哪些文件。
也看看 uib-progressbar documentation。您编写的代码片段似乎是正确的。正如我所说，我认为这个问题的原因是您没有包含 Bootstrap.
的 JS 文件
编辑：哦，ui-bootstrap 显然不需要 Bootstrap 的 JS，你是对的。
关于您问题的 min-width 部分：我注意到您在 <uib-progressbar> 元素中添加了 progress-bar class。根据文档，不应使用 progress-bar class（它将由 ui-bootstrap 添加到将在 中呈现的 <div> 元素 <uib-progressbar>，您可以通过检查进度条宽度 devtools 轻松验证这一点。
因此，min-width 属性 将应用于 内部 <div>。但是，由于渲染是由 angular 管理的，因此更改它的唯一方法是添加这样的 CSS 规则：
.setminwidth .progress-bar {
min-width: 20em;
}
然后像这样将新的 setminwidth class 添加到外部 <uib-element>：
<uib-progressbar class="progress-striped setminwidth" value="22" type="warning">22%</uib-progressbar>
我对此进行了测试，但它似乎不起作用。我认为这是因为 min-width: 0; is hardcoded in the template，每次 ui-bootstrap re-renders 元素都会重置。
我尝试将 !important 添加到 CSS 规则，以避免被覆盖，但它也不起作用。
我想此时您应该考虑为什么需要添加此 min-width 属性，因为 ui-bootstrap 喜欢覆盖它。难道是不想进度条在百分比低的时候变成"too empty"？如果是这样的话，我想你应该看看最近由Bootstrap介绍的the changes：现在他们似乎为0%、1%和2%添加了一个特殊的min-width。
UPD：Bootstrap 人显然 changed their mind and reverted the special min-width value. At this point, I think that ui-bootstrap should follow along and remove the hardcoded min-width: 0; as it's not needed anymore. I just sent 对他们来说 pull-request。如果他们合并它，您将能够使用我上面发布的CSS。
我正在尝试设置 angular UI bootstrap 进度条的最小宽度。我检查了文档，他们没有提到如何做到这一点。我知道 'regular' bootstrap 你可以使用像 style="min-width: 10em;" 这样的东西。但是，这仅在您将其包装在标准进度 bootstrap div 中时才有效，如下所示：
<div class="progress">
<uib-progressbar class="progress-striped active progress-bar" value="value" style="min-width: 10em;">
<span> text </span></uib-progressbar>
</div>
但是这会显示一个没有 'active' 动画的进度条，因为常规 bootstrap 不支持这个。当我这样尝试时，它不会设置最小宽度 属性
<uib-progressbar class="progress-striped active progress-bar"value="value" style="min-width: 10em;">
<span> text </span>
</uib-progressbar>
编辑： 我忽略了 'regular' bootstrap 文档中的动画部分。但是，如果可能的话，我想使用 UI bootstrap 进度条。
常规 Bootstrap supports 动画进度条。
您确定您正确导入了 Boostrap 文件吗？我想你可能只包含了 CSS 文件而不是 JS。查看 basic template 以了解应包含哪些文件。
也看看 uib-progressbar documentation。您编写的代码片段似乎是正确的。正如我所说，我认为这个问题的原因是您没有包含 Bootstrap.
的 JS 文件编辑：哦，ui-bootstrap 显然不需要 Bootstrap 的 JS，你是对的。
关于您问题的 min-width 部分：我注意到您在 <uib-progressbar> 元素中添加了 progress-bar class。根据文档，不应使用 progress-bar class（它将由 ui-bootstrap 添加到将在 中呈现的 <div> 元素 <uib-progressbar>，您可以通过检查进度条宽度 devtools 轻松验证这一点。
因此，min-width 属性 将应用于 内部 <div>。但是，由于渲染是由 angular 管理的，因此更改它的唯一方法是添加这样的 CSS 规则：
.setminwidth .progress-bar {
min-width: 20em;
}
然后像这样将新的 setminwidth class 添加到外部 <uib-element>：
<uib-progressbar class="progress-striped setminwidth" value="22" type="warning">22%</uib-progressbar>
我对此进行了测试，但它似乎不起作用。我认为这是因为 min-width: 0; is hardcoded in the template，每次 ui-bootstrap re-renders 元素都会重置。
我尝试将 !important 添加到 CSS 规则，以避免被覆盖，但它也不起作用。
我想此时您应该考虑为什么需要添加此 min-width 属性，因为 ui-bootstrap 喜欢覆盖它。难道是不想进度条在百分比低的时候变成"too empty"？如果是这样的话，我想你应该看看最近由Bootstrap介绍的the changes：现在他们似乎为0%、1%和2%添加了一个特殊的min-width。
UPD：Bootstrap 人显然 changed their mind and reverted the special min-width value. At this point, I think that ui-bootstrap should follow along and remove the hardcoded min-width: 0; as it's not needed anymore. I just sent 对他们来说 pull-request。如果他们合并它，您将能够使用我上面发布的CSS。