Javascript 将facebook登录按钮的宽度设置为100%

我需要将facebook登录按钮的宽度设置为100%。根据文档，它应该像添加

数据宽度

属性一样简单：

<div
  class="fb-login-button"
  data-width="100%"
  data-max-rows="1"
  data-size="large"
  data-button-type="continue_with"
  data-use-continue-as="true"
></div>

---

但它不起作用（按钮根本不显示）。即使我在他们的官方表单上输入100%的宽度来生成按钮，它也不起作用。是某种错误还是我做错了什么

在文档之后，您似乎无法编辑数据宽度，我认为它仅在从旧版本迁移时使用

---

您要查找的唯一属性似乎是“数据大小”，它可以接受3个参数：“小、中、大”

为什么不使用css来设置按钮的样式

.fb登录按钮{
宽度：100%；
背景色：rgba（0,0,0,0.2）；//仅用于调试
}

脸谱网

您可以尝试以下方法：

    <div id="fb-root"></div>

    <script async defer src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v3.2"></script>

    <div class="fb-login-button" data-size="large" data-width="100%" data-button-type="continue_with" data-auto-logout-link="false" data-use-continue-as="false">Button</div>

---

不要使用Facebook按钮。构建您自己的按钮并使用Facebook上的Javascript SDK

JavaScript SDK的FB.login（）

--->第3点

---

首先，我们需要了解以百分比表示的宽度是相对于父元素或包含元素的。如果父级不受静态宽度或全宽度的一部分约束，我们可以在CSS中声明宽度：100%。通过将width:100%添加到样式中，我们获得了全宽，请参见以下JSFIDLE：

Facebook登录

---

然后它需要400px，但我需要100%。这将是设置触发按钮渲染的原始元素的样式。按钮本身加载到iframe中，您无法访问其中的内容进行样式设置。啊，好的。我不知道通过Facebook按钮大尺寸限制宽度为400px最大？@Pete是的，输入400px是可能的，但我希望它更长一些，我开始认为这是不可能的…确保父div也是全宽的：）无论如何，按钮占据100%，但不超过400px。我希望它比400px长。将数据大小设置为1000px？很可能这是唯一的解决方案，我认为应该有一种方法可以通过官方按钮来实现。

     .fb-login-button {
        width: 100%;
     }

<div id="spinner"
style="
    background: #4267b2;
    border-radius: 5px;
    color: white;
    height: 40px;
    text-align: center;
    width: 100%;">
Facebook Login
<div
class="fb-login-button"
data-max-rows="1"
data-size="large"   
data-button-type="continue_with"
data-use-continue-as="true"
></div>