Bootstrap 3“行”类在移动设备上不起作用？答案

【问题标题】：Bootstrap 3 "row" class not working on mobile?Bootstrap 3“行”类在移动设备上不起作用？
【发布时间】：2014-06-08 01:17:54
【问题描述】：

我的网站wisderm.com 的首页有相邻的 Twitter 关注和 Facebook 按钮。但是在移动设备上，Facebook 按钮与 Twitter 按钮不在同一行，即使我已将它们放在一个带有“row”类的 div 中。

<!-- Social -->
<div class="container">
<div class="row">
    <a href="https://twitter.com/wisderm" class="twitter-follow-button" data-show-count="false" data-size="large" data-lang="en">Follow @wisderm</a>
    <div class="fb-like" data-href="https://facebook.com/wisdermcom" data-layout="button" data-action="like" data-show-faces="false" data-share="true"></div>
</div><!-- end of row -->
</div><!-- end of container -->

这是为什么？是因为 Twitter 按钮在 iframe 中吗？我该如何解决？

我的 Nexus 4 上的图片：Messed up Facebook and Twitter buttons

使用display: inline !important时的图片：Messed up buttons 2

【问题讨论】：

你能分享一张图片在你最后是如何显示的吗？
当然 Nimmi，我在我的 Nexus 4 上添加了一张照片。
请尝试添加 display: inline;到你的类似FB的课程。 .fb-like { display:inline; }
好的，我已经添加了。但它似乎不起作用，该死。
我可以提供帮助的最后一个建议是请添加 !important with display 可能有效:(

标签： css facebook twitter-bootstrap twitter

【解决方案1】：

您可以使用 ul 和 li 并在 li 上应用如下 CSS（您也可以使用 class）。

ul li {
float:left;
list-style:none;
margin-right:1em;
}

【讨论】：