Question

我在我们的一个材质精简页面中使用了Indeterminate loading。问题在于它没有采用整个长度。

我在课堂上使用div＆＃39; mdl-grid＆＃39;在里面，我正在使用另一个div与类＃mdl-cell mdl-cell - 12-col＆＃39;。在这个内部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。

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

Answer 1

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

Here is a codepen正如你想要的那样工作。简单地理解CSS动画可以通过百分比这样的继承宽度来获胜。

Material design lite不确定进度条未应用整个宽度

1 个答案: