Question

如何在Twitter Bootstrap中嵌入推文？ Twitter嵌入使用Twitter Bootstrap覆盖并丢失所有Twitter UI和功能。围绕这个的方式是什么让Twitter在Bootstrap嵌入节目？在此先感谢您的帮助！

以下是一个示例：http://www.bootply.com/3k4WKA1cLU在预览中，您会看到嵌入的推文应该是这样的。现在运行它，您将看到所有Twitter UI和功能都被剥离，它只是一个块引用。

Answer 1

Twitter Bootstrap为blockquote元素添加了border-left，margin和padding属性。因此，您可以通过以下代码覆盖它。

/* Override the bootstrap style */
blockquote {
    border-left: none;
    margin:0;
    padding:0;
}

对于所有twit嵌入给出一个类，即我给了Twitter-tweet作为类naem然后为下面的代码给出了所需的CSS ...

blockquote.twitter-tweet {
  display: inline-block;
  font-family: "Helvetica Neue", Roboto, "Segoe UI", Calibri, sans-serif;
  font-size: 12px;
  font-weight: bold;
  line-height: 16px;
  border-color: #eee #ddd #bbb;
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  margin: 10px 5px;
  padding: 0 16px 16px 16px;
  max-width: 468px;
}

blockquote.twitter-tweet p {
 font-size: 16px;
 font-weight: normal;
 line-height: 20px;
}

 blockquote.twitter-tweet a {
   color: inherit;
   font-weight: normal;
   text-decoration: none;
   outline: 0 none;
 }

 blockquote.twitter-tweet a:hover,
 blockquote.twitter-tweet a:focus {
    text-decoration: underline;
 }

将推文嵌入Bootstrap

1 个答案: