添加 twitter 图标并正确对齐它们答案

【问题标题】：Adding twitter icons and aligning them properly添加 twitter 图标并正确对齐它们
【发布时间】：2015-09-18 11:58:31
【问题描述】：

是否有任何实现社交媒体（主要是 twitter）图标的来源？

目前我已经考虑内置进行测试。但它没有正确对齐。有什么帮助吗？

我还希望第一行有 4 列。但它只显示 2 列。为什么？

在此链接中：https://jsfiddle.net/karimkhan/nzxd5r3r/6/

图标似乎未对齐，虽然我应用了 4 列，但在最初的原始 2 列中。

有没有办法为每个标签添加推特图标？

   <div class="container">
        <div class="row">
                <div class="col s3 m5">
                    <div class="card-panel green accent-4">
                      <span class="white-text">Tweets
                      </span>
                    </div>
                </div>
                <div class="col s3 m5 ">
                    <div class="card-panel deep-orange accent-2">
                         <i class="material-icons">repeat</i>
                      <span class="white-text">Retweet
                      </span>
                    </div>
                </div>
                <div class="col s3 m5">
                    <div class="card-panel green accent-4">
                      <span class="white-text"> Favourite
                      </span>
                    </div>
                </div>
                <div class="col s3 m5 ">
                    <div class="card-panel deep-orange accent-2">
                      <span class="white-text"> Score
                      </span>
                    </div>
                </div>
        </div>
        <div class="row">
                <div class="col s4 m5">
                    <div class="card-panel teal">
                      <span class="white-text">I am a very simple card. I am good at containing small bits of information.
              I am convenient because I require little markup to use effectively. I am similar to what is called a panel in other frameworks.
                      </span>
                    </div>
                </div>
                <div class="col s4 m5">
                    <div class="card-panel light-blue accent-4">
                      <span class="white-text">I am a very simple card. I am good at containing small bits of information.
              I am convenient because I require little markup to use effectively. I am similar to what is called a panel in other frameworks.
                      </span>
                    </div>
                </div>
                <div class="col s4 m5">
                    <div class="card-panel light-blue accent-4">
                      <span class="white-text">I am a very simple card. I am good at containing small bits of information.
              I am convenient because I require little markup to use effectively. I am similar to what is called a panel in other frameworks.
                      </span>
                    </div>
                </div>
        </div>

【问题讨论】：

将 col s3 m3 转换为 col s3 m4 以在第一行显示 4 列
@imGaurav：谢谢，你能告诉我m在这里的意义吗？

标签： css html twitter-bootstrap twitter material-design

【解决方案1】：

关于图标对齐，我猜您的意思是您希望“重复”图标与“转推”文本的行高对齐。您可以通过添加：

.material-icons{
    vertical-align: middle;
}

这是可能的，因为图标有 display: inline-block。内联块元素具有垂直对齐选项

【讨论】：

【解决方案2】：

为了在第一行获得 4 列结构，您需要更改 col s3 m5 到 col s3 m3。这意味着在您的 12 列网格中，您有 4 张卡片，当屏幕尺寸中等时（即 CSS 中提到的超过 601 像素），每张卡片将占据 3 列（m3 + m3 + m3 + m3 = 12）。

欲了解更多信息，请访问以下链接：

http://materializecss.com/grid.html

【讨论】：