Question

我正在使用bootstrap 3，试图在页面右下方的Facebook上找到“message us”插件：

<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框架定义响应式网站。您必须包装容器中的所有元素。

然后，您将按行的类定义yor web中的每一行。

最后，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>

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

1 个答案: