我正在使用Twitter API开展项目。基本上,输入用户名,它会提取用户的推文并在页面上呈现它们。它在Twitter提供嵌入式推文的典型卡片中呈现它们。我想改变牌的高度。
通过选择元素并将"height: 600px;"
添加到类".EmbeddedTweet"
,可以很容易地更改检查器中卡片的高度,但是,当我在CSS文件中应用相同的更改并保存和刷新页面时,更改不会出现。为什么更改会出现在检查器中,而不是在重新加载页面时?
我之前没有遇到过这个问题。我是一名新手。我怎样才能让变化坚持下去?谢谢。
示例代码:(从Twitter API发回的推文)
<div class="EmbeddedTweet EmbeddedTweet--edge
js-clickToOpenTarget
tweet-InformationCircle-widgetParent"
data-click-to-open-target="https://twitter.com/username/status/947824196909961216"
data-iframe-title="Twitter Tweet"
data-dt-full="%{hours12}:%{minutes} %{amPm} - %{day} %{month} %{year}"
data-dt-explicit-timestamp="8:37 AM - Jan 1, 2018"
data-dt-months="Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec"
data-dt-am="AM" data-dt-pm="PM" data-dt-now="now"
data-dt-s="s" data-dt-m="m" data-dt-h="h"
data-dt-second="second" data-dt-seconds="seconds"
data-dt-minute="minute" data-dt-minutes="minutes"
data-dt-hour="hour" data-dt-hours="hours"
data-dt-abbr="%{number} %{symbol}"
data-dt-short="%{day} %{month}" data-dt-long="%{day} %{month} %{year}"
data-scribe="page:tweet"
id="twitter-widget-0"
data-twitter-event-id="0"
lang="en">
在该推文中添加CSS属性:
.EmbeddedTweet {
height: 600px;
}
添加!important
以及清除缓存似乎没有任何区别。
根据我对iframe的经验,特别是与twitter apps / apis的关系,可以完全阻止css,不允许对其进行任何更改。您可能需要找到一个更具延展性的选项来嵌入推文?
您无法使用CSS影响iframe的内容。
你看过关于自定义css的Twitter for websites文档部分吗?
这里还有一个触及高度主题的常见问题解答; How can I create an Embedded Tweet of a consistent height?严格说:
嵌入式推文要求最小宽度为220像素,最多可填充550个水平像素。
Twitter和其他人对于他们的小部件看起来有点具体,所以他们可能不会让你摆弄它看起来很多。对于布局中的任何类型的更改,您可以尝试这样做:将conversation和cards参数设置为false以将Tweet显示限制为其基本格式。
希望这可以帮助!
可能你已经尝试但仍然1.我建议你可以检查是否有任何css覆盖? 2.根据heirarchy尝试给css。