Material design lite 不确定的进度条没有应用整个宽度答案

【问题标题】：Material design lite Indeterminate progress bar is not taking whole width applied to itMaterial design lite 不确定的进度条没有应用整个宽度
【发布时间】：2015-10-21 18:22:24
【问题描述】：

我在我们的材料精简版页面之一中使用不确定加载。问题是它没有将整个长度应用于它。

我正在使用带有“mdl-grid”类的 div，而在里面我正在使用另一个带有“mdl-cell mdl-cell--12-col”类的 div。在这个内部 div 中，我实际上使用的是进度条 div。

我正在使用以下 HTML 代码：

<div class="mdl-grid">
<div class="mdl-cell mdl-cell--12-col">
<div class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
</div>
</div>

其输出如下： using-12Col-div

如您所见，它没有占用 div 的整个长度，即 100% 所以，我尝试了两个 6 列网格，并尝试将进度条组件添加到类似的组件中，

<div class="mdl-cell mdl-cell--6-col">
<div class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
</div>
<div class="mdl-cell mdl-cell--6-col">
<div class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
</div>

但它仍然采用相同的宽度。

可以在here找到相同的codepen。

任何有关使用无级进度条获取分配给它的整个长度的帮助，将不胜感激。

【问题讨论】：

标签： progress-bar material-design-lite

【解决方案1】：

这是因为您给了容器全宽，而不是进度本身。动画在某种意义上需要设定宽度才能始终如一地工作。我们选择了 3 或 500 像素的硬宽度而不是 .mdl-progress。

Here is a codepen 按您的意愿工作。简单理解 CSS 动画可能会因继承宽度（如百分比）而变得不稳定。

【讨论】：