css - Material Design - 一个部分中有 5 个元素。因为 12 模 5 等于丑

Question

我在一个页面上使用 Material Design Light 库，我有 5 个元素，我想在一个部分中占据相同的部分:

<section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp social-section">
  <a href="http://twitter.com" target="_blank" class="mdl-cell--2-col mdl-cell--2-col-phone mdl-button--raised mdl-js-ripple-effect mdl-color-text--primary-contrast frontpage-social-button gt-info-twitter">
    <i class="fa fa-twitter big-icon"></i>
  </a>
  <a href="http://facebook.com" target="_blank" class="mdl-cell--2-col mdl-cell--2-col-phone mdl-button--raised mdl-js-ripple-effect mdl-color-text--primary-contrast frontpage-social-button gt-info-facebook">
    <i class="fa fa-facebook big-icon"></i>
  </a>
  <a href="http://linkedin.com" target="_blank" class="mdl-cell--2-col mdl-cell--2-col-phone mdl-button--raised mdl-js-ripple-effect mdl-color-text--primary-contrast frontpage-social-button gt-info-linkedin">
    <i class="fa fa-linkedin big-icon"></i>
  </a>
  <a href="http://youtube.com" target="_blank" class="mdl-cell--2-col mdl-cell--2-col-phone mdl-button--raised mdl-js-ripple-effect mdl-color-text--primary-contrast frontpage-social-button gt-info-youtube">
    <i class="fa fa-youtube big-icon"></i>
  </a>
  <a href="http://plus.google.com" target="_blank" class="mdl-cell--2-col mdl-cell--2-col-phone mdl-button--raised mdl-js-ripple-effect mdl-color-text--primary-contrast frontpage-social-button gt-info-gplus">
    <i class="fa fa-google-plus big-icon"></i>
  </a>
</section>

而且我希望他们填满整个部分，而不仅仅是在第一个部分使用 mdl-cell--1-offset。

Answer 1

无法找到执行此操作的 native MDL 方法，我将以下内容添加到我的 frontpage-social-button 类中:

width:20%;