Question

我试图通过在引号的上方和下方堆叠一些带引号的行来尝试在Bootstrap中创建一些漂亮的块引用，这样只是为了给你一个粗略的例子（可以在这里看到（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

enter image description here 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
}

在Bootstrap 3中将引号与行底部对齐？

2 个答案: