Bootstrap：在blockquote塊周圍添加引號

Question

我正在使用Twitter的Bootstrap作爲項目，我想顯示一些<blockquote>的引號，並在塊引用元素的開頭和結尾處有一些大引號。

我無法在blockquote周圍顯示引號，我不知道如何解決，我甚至使所有元素內聯（這導致在一行中多個塊引用的不想要的行爲），但它仍然不工作。

Bootply

HTML

<blockquote> 
    <p>Something really amazing goes here</p> 
    <footer>Author</footer> 
</blockquote> 

<blockquote> 
    <p>Something really amazing goes here</p> 
    <footer>Author</footer> 
</blockquote> 

CSS

blockquote { 
    padding: 6px 16px; 
    border: none; 
    quotes: "\201C" "\201D"; 
    display: inline-block; 
} 

blockquote:before { content: open-quote; font-weight: bold; display: inline-block; } 

Answer 1

如果你想要的報價是在你可以做這樣的事情<blockquote>元素的對角線：

blockquote { 
    padding: 6px 16px; 
    border: none; 
    quotes: "\201C" "\201D"; 
    display: inline-block; 
    position: relative; 
} 

blockquote:before { 
    content: open-quote; 
    font-weight: bold; 
    position:absolute; 
    top:0; 
    left: 0; 
} 
blockquote:after { 
    content: close-quote; 
    font-weight: bold; 
    position:absolute; 
    bottom:0; right: 0; 
} 

基本上將報價定位在左上角和右下角。

下面是一個例子http://www.bootply.com/JS6qskU1tU

編輯1

我可能誤解了你的問題，如果你想要的報價看起來就像普通的文本，你會簡單地做同樣的事情，你有，而是指定之前，爲<p>標籤不<blockquote>標籤，像這樣經過：

blockquote p:before { 
    content: open-quote; 
    font-weight: bold; 
} 
blockquote p:after { 
    content: close-quote; 
    font-weight: bold; 
} 

例如：http://www.bootply.com/BH80o3yLJp