材料设计-一节中的5个项目。因为12模5等于丑陋

Question

我在一个页面上使用材料设计灯库，其中我有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

无法找到本机MDL实现此操作的方法，我将以下内容添加到我的frontpage-social-button类中：

width:20%;