如何调整Bootstrap引用块宽度，实现横向宽幅显示？

问题分析 #

你的引用块宽度受限主要有三个核心原因：

• HTML存在笔误：<dizv>应为<div>，会导致布局解析异常
• 外层的col-lg-9 col-xl-7类严格限制了卡片容器的水平宽度
• 自定义的.custom-width-from-the-ceo设置了flex-direction: row，强制内容横向排列，违背了你要的垂直显示需求

修正方案 #

1. 修改CSS代码

移除冗余样式，恢复引用块的垂直布局并放宽宽度限制：

.custom-width-from-the-ceo {
  /* 恢复块级垂直布局，移除横向flex设置 */
  display: block;
  /* 让引用块占满父容器可用宽度，如需留边距可改为max-width: 90% */
  width: 100%;
}

.blockquote p {
  margin-bottom: 0;
}

/* 移除未使用的.con-width类，避免冗余 */

2. 修正并调整HTML代码

修正笔误，同时放宽外层列的宽度限制：

<section class="vh-100" style="background-color: #eee;">
  <!-- 修正笔误：dizv → div -->
  <div class="container py-5 h-100">
    <div class="row d-flex justify-content-center align-items-center h-100">
      <!-- 调整列宽度，用col-lg-11 col-xl-9让卡片更宽，也可直接用col占满父容器 -->
      <div class="col col-lg-11 col-xl-9">
        <div class="card" style="border-radius: 30px;">
          <div class="card-body p-5">

            <div class="text-center mb-4 pb-2">
              <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-quotes/bulb.webp"
                alt="Bulb" width="100">
            </div>

            <figure class="text-center mb-0" >
              <blockquote class="blockquote custom-width-from-the-ceo">
                <p class="pb-3-new">
                  <i class="fas fa-quote-left fa-xs text-primary"></i>
                  <span class="lead font-italic">
                     Kao was founded in Istanbul in 1995 by an idealistic and dynamic team with thirty years of experience in machinery, electronics and metrology.
      With a strong R&D team and modern production lines, Kao has been able to create remarkable products in terms of the technical specifications, ergonomics, aesthetics and the durability.
      Kao has been producing metrological test devices with measurement precision beyond world standards and extremely user-friendly interfaces in the field of metrology
      As Kao-Metrology, we aim to collaborate with industrialists to contribute to creating a more efficient and powerful metrological systems for a reliable future.
      Therefore, we see every product we develop as a helper that opens the door to new possibilities.
      Please don't hesitate to share your thoughts on our products and technologies you encountered on our website.
      Wishing for every tomorrow to be brighter than today...
                  </span>
                  <i class="fas fa-quote-right fa-xs text-primary"></i>
                </p>
              </blockquote>
              <figcaption class="blockquote-footer mb-0">
                From the CEO
              </figcaption>
            </figure>

          </div>
        </div>
      </div>
    </div>
  </div>
</section>

额外调整建议 #

• 若不想引用块完全占满卡片宽度，可将.custom-width-from-the-ceo的width:100%改为max-width: 90%，再添加margin: 0 auto实现居中
• 列的响应式类可按需修改，比如col-xl-10会在大屏上提供更宽的空间，col则会在全尺寸屏幕下占满父容器

内容的提问来源于stack exchange，提问作者persona