html - 为什么具有 `list-inline` Bootstrap 类的 UL 列表中的元素会换行？

Question

我有这个列表，我想显示这个内联，我使用 list-inline 类，但结果不正确。我不知道为什么会这样。感谢您的回答。

cshtml 代码 :

<ul  style="text-align: center; list-style-type: none;  vertical-align: top;">

                <li>
                    @foreach (var item in Model.SocialNetworks)
                    {
                        <ul class="list-inline" style="text-align:center;list-style-type:none;padding-top:15px;">
                            <li class="col-xs-3">
                                <a class="aFooter" href="@item.SocialLink">
                                    <img class="img-responsive center-block socialIcon" src="@Url.Content(item.SocialIcon.ToString())" />
                                </a>
                            </li>
                        </ul>
                    }
                </li>
            </ul>

结果:

Answer 1

删除 padding-top: 15px;在里面<li>标签。

随着运行fiddle .