부트 스트랩 3에서 행의 맨 아래에 따옴표를 맞 춥니 다?

Question

부트 스트랩에 멋진 찾고 블럭 퀘스트를 만들려고하는데 인용문 위와 아래에 따옴표가있는 행을 쌓아서 (예 : 여기 (http://www.bootply.com/weEUvuQfw2)을 볼 수 있습니다.) bootply 예제에서 볼 수 있듯이 , 왼쪽 따옴표는 문장에서 사용될 때 그 성격이 원래 높았 기 때문에 따옴표 위로 올라간다. 나는 단순한 것이어야한다고 상상한다.하지만 왼쪽 따옴표를 가져 와서 맨 아래에 가져 가면 어떻게 될까? 음의 여백이나 패딩을 설정,이 그리드의 왼쪽 상단 셀은? 그것을 할 것 같지 않습니다. 어떤 아이디어?

<div class="container"> 

    <div class="row right"> 
    <div class=" col-lg-3 "> 
     <font size="40">“</font> 
    </div> 
    <div class="col-lg-6 "> 

    </div> 
    <div class="col-lg-3 ">  
    </div> 
    </div> 
    <div class="row center"> 
    <div class=" col-lg-3 ">  
    </div> 
    <div class="col-lg-6 "> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet blandit libero. Nullam at tincidunt risus. Nam quis suscipit ligula, ut cursus nunc. Nulla eget eros diam. Aenean bibendum accumsan velit in dapibus. Pellentesque sodales leo nec lacus consequat, nec tempor nibh sollicitudin. Fusce mollis luctus ultrices. Quisque tempus placerat velit, at varius libero pulvinar eu. Curabitur sit amet est velit. Praesent id eleifend nulla, eu iaculis lacus. Integer imperdiet, tellus nec tristique mattis, magna quam luctus tellus, nec semper enim felis eget nisl. 
    </div><!-- 
    --><div class="col-lg-3 "> 

    </div> 
    </div> 

    <div class="row left"> 
    <div class=" col-lg-3 "> 

    </div> 
    <div class="col-lg-6 "> 

    </div><!-- 
    --><div class="col-lg-3 "> 
    <font size="72">” 
    </font></div><font size="72"> 
    </font></div><font size="72"> 

</font></div><!-- /.container --> 

그리고 CSS를

.center { 
    text-align: center; 
} 

.right { 
    text-align: right; 



} 


.left { 
    text-align: left; 
} 

Answer 1

당신은 그렇게 뭔가를 찾고 계십니까?

HTML :

<div class="container"> 

    <div class="row right"> 
    <div class=" col-lg-3 "> 
     <font size="40">“</font> 
    </div> 
    <div class="col-lg-6 "> 

    </div><!-- 
    --><div class="col-lg-3 "> 

    </div> 
    </div> 
    <div class="row center"> 
    <div class=" col-lg-3 "> 

    </div> 
    <div class="col-lg-6 "> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet blandit libero. Nullam at tincidunt risus. Nam quis suscipit ligula, ut cursus nunc. Nulla eget eros diam. Aenean bibendum accumsan velit in dapibus. Pellentesque sodales leo nec lacus consequat, nec tempor nibh sollicitudin. Fusce mollis luctus ultrices. Quisque tempus placerat velit, at varius libero pulvinar eu. Curabitur sit amet est velit. Praesent id eleifend nulla, eu iaculis lacus. Integer imperdiet, tellus nec tristique mattis, magna quam luctus tellus, nec semper enim felis eget nisl. 
    </div><!-- 
    --><div class="col-lg-3 "> 

    </div> 
    </div> 

    <div class="row left"> 
    <div class=" col-lg-3 "> 

    </div> 
    <div class="col-lg-6 "> 

    </div><!-- 
    --><div class="col-lg-3 "> 
    <font size="72">” 
    </font></div><font size="72"> 
    </font></div><font size="72"> 

</font></div><!-- /.container --> 

CSS : 여기

.center { 
    text-align: center; 
} 
.right { 
    text-align: left; 
    margin-bottom: -20px; 
} 
.left { 
    text-align: left; 
} 

이 바이올린입니다 : http://jsfiddle.net/4g0gp5pp/ 마크 업이 많이 정말 간단 뭔가를 만들 수 있어요

Answer 2

.

DEMO : http://jsbin.com/hadapo/1/edit

HTML :

<blockquote class="quotemarks"> 
    <p>Words go here</p> 

    <footer>Someone</footer> 

    </blockquote> 

CSS

.quotemarks:before, 
.quotemarks:after { 
    text-align: center; 
    font-size: 60px; 
    line-height: 1; 
} 

.quotemarks:before { 
    content: "\201C"; 
    position: relative; 
    bottom: -20px; 
} 

.quotemarks:after { 
    content: "\201D" 
} 

.quotemarks { 
    border: 0; 
    padding: 0; 
    text-align: center; 
    border-top: 1px solid #ddd; 
    border-bottom: 1px solid #ddd; 
} 

.quotemarks footer { 
    text-indent: -10px 
}