Bootstrap 4 Beta 3中blockquote类无侧边线条显示问题咨询
Bootstrap 4 Beta 3中Blockquote侧边线条不显示的原因及解决办法
你完全没操作错!这个问题是Bootstrap 4版本迭代时的样式调整导致的——从Beta版本开始,官方移除了.blockquote类默认的左侧侧边线条效果,而Alpha版本里这个样式是默认自带的。
要在Bootstrap 4 Beta 3(及后续稳定版)中恢复侧边线条,只需要给你的<blockquote>标签额外添加一个.blockquote-border-left类就行。
修改后的代码示例:
<section> <blockquote class="blockquote blockquote-border-left"> Text for the blockquote. Text for the blockquote. Text for the blockquote. Text for the blockquote. Text for the blockquote. Text for the blockquote. Text for the blockquote. Text for the blockquote. Text for the blockquote. Text for the blockquote. Text for the blockquote. Text for the blockquote. </blockquote> <blockquote class="blockquote blockquote-border-left"> Text for the blockquote. Text for the blockquote. Text for the blockquote. Text for the blockquote. Text for the blockquote. Text for the blockquote. Text for the blockquote. Text for the blockquote. Text for the blockquote. Text for the blockquote. Text for the blockquote. Text for the blockquote. </blockquote> </section>
另外补充一点:如果你需要给blockquote添加页脚,Bootstrap 4 Beta里的.blockquote-footer类依然保留了对应的样式(比如顶部边框和斜体),示例如下:
<blockquote class="blockquote blockquote-border-left"> <p>Text for the blockquote.</p> <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote>
内容的提问来源于stack exchange,提问作者Feridun Akpinar
相关产品推荐
相关产品推荐

