css - 位置固定不适用于移动设备

Question

我正在使用 bootstrap 3，试图将来自 Facebook 的“给我们发消息”插件放在页面的右下角:

<div class="fb-messengermessageus" messenger_app_id="" page_id="" color="blue" size="xlarge">
</div>

footer .fb-messengermessageus {
    cursor: pointer;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 10;
}

我在桌面上工作正常(即使在 Chrome 上调整到窗口的最小宽度也可以)，但是按钮在移动设备上没有正确显示，特别是它从左边开始，它的一半被隐藏了尺寸。我该如何解决这个问题？

为了完整性:https://developers.facebook.com/docs/messenger-platform/plugin-reference/message-us

Answer 1

首先，您应该定义一个元标记来设置设备固定的分辨率。

<meta name="viewport" content="width=device-width, initial-scale=1">

之后，您可以使用引导框架定义响应式网站。您必须将所有元素包装在一个容器中。

然后您将按行的类定义您网络中的每一行。

最后，bootstrap 在网格系统中定义页面，这意味着它将页面划分为 12 列。您可以设置每个元素要使用的列数。

例如:col-xs-12表示当分辨率尺寸为xs(特小)时，该元素填充12列(全部)。

您可以查看此网址以了解更多信息:Grid´s Bootstrap

我猜你的问题可能是这个，下一个例子会给你正确的方法......希望它有帮助......如有任何疑问，请告诉我......:)

<div class="container">
  <div class="row">
    <div class="fb-messengermessageus col-xs-12 col-sm-12 col-md-12 col-lg-12" messenger_app_id="" page_id="" color="blue" size="xlarge">
    </div>
  </div>
</div>