You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.15 07:53:28