材料设计不确定进度棒不带全宽度。

Question

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

我在使用div与类‘mdl-网格’，在里面，我使用另一个div与类'mdl-cell mdl-单元-12-cell‘。在这个内部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>

其输出类似于：使用-12 div 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>

但它的宽度还是一样的。

同样的代码可以找到这里。

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

Answer 1

这是因为您给容器的宽度是完全的，而不是进度本身。动画在某种意义上需要一定的宽度才能持续工作。相对于.mdl-progress，我们选择了3500像素的硬宽度。

这是一个代码库是你想要的工作方式。简单地理解CSS动画可能会变得不稳定的继承宽度，如百分比。