如何使Facebook評論有100％的流動寬度？

http://developers.facebook.com/docs/reference/plugins/comments/如何使Facebook評論有100％的流動寬度？

這是我的，包括網頁在Facebook上的JavaScript SDK之後產生的評論區：

<div class="fb-comments fb-comments-update" data-href="http://site.com" data-width="600" data-colorscheme="light" data-num-posts="10" data-order-by="social" data-mobile="auto-detect"></div>

正如你可以看到Facebook的設置屬性您可以根據這一數據的評論區域的寬度給它：

data-width="600"

在這種情況下，我告訴我的Facebook想要的面積爲600個像素。但我現在正在建設一個響應式網站，並且需要評論部分來適應屏幕寬度的100％。這樣做沒有這些作品：

data-width="100" 
data-width="100%"

有沒有什麼辦法讓爲Facebook評論流體寬度是多少？

來源

2013-04-11 TK123

會有什麼happend，如果你不使用'數據寬度「，並在樣式表中設置寬度？ – miszczu 2013-04-11 15:21:17

@miszczu我試着改變它與CSS，但無法弄清楚。 – TK123 2013-04-11 15:28:03

您是否必須使用'data-width'來獲取評論？你可以在CSS文件中設置它嗎？如果是的話，我會給你的CSS代碼。 – miszczu 2013-04-11 15:30:17

第一大小適用於小於1200px，大於979px的設備。唯一的問題是IE有時會出現這種情況，但你可以使用類似的東西：width: 1200px\9; - IE 8及以上版本

這個示例來自bootstrap，我經常使用它。要使用它，你需要更少的win version。但是這個代碼在aby瀏覽器中工作（除了舊的IE）。

.fb-comments { width: 490px; /* or width: 50%; */ } 

/* Large desktop */ 
@media (min-width: 1200px) { 
    .fb-comments { width: 600px; /* or width: 50%; */ } 
} 

/* Portrait tablet to landscape and desktop */ 
@media (min-width: 768px) and (max-width: 979px) { 
    .fb-comments { width: 400px; /* or width: 50%; */ } 
} 

/* Landscape phone to portrait tablet */ 
@media (max-width: 767px) { 
    .fb-comments { width: 30px; /* or width: 50%; */ } 
} 

/* Landscape phones and down */ 
@media (max-width: 480px) { 
    .fb-comments { width: 200px; /* or width: 50%; */ } 
}

也嘗試使用百分比，而不是像素，即使填充，例如：

.fb-comments { width: 90%; height: auto; padding: 0 5%; }

來源

2013-04-11 15:47:35 miszczu

由於Facebook的設置，這不再有效iframe中評論框的寬度。嘆/ – 2014-04-08 23:42:45

試試這個代碼：

<style>.fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style] {width: 100% !important;} 
.fb-comments span, .fb-comments iframe span[style], .fb-like-box span, .fb-like-box iframe span[style] {width: 100% !important;} 
</style>

來源

2013-12-15 20:13:46

如何使Facebook評論有100％的流動寬度？

回答

相關問題