如何在Bootstrap页面中让blockquote居中且文本左对齐

嘿，这个需求很常见，我来给你几个实用的解决方案，结合Bootstrap的特性和一点点自定义CSS就能轻松实现：

方法一：利用Bootstrap网格系统（推荐） #

这是最贴合Bootstrap设计思路的做法，通过网格列的宽度控制和自动margin来实现整体居中，同时保留文本左对齐的默认样式：

<div class="container">
  <!-- 第一个blockquote -->
  <div class="row">
    <div class="col-md-8 mx-auto">
      <blockquote>
        <p>A wise man proportions his belief to the evidence.</p>
        <footer class="blockquote-footer"><cite>David Hume</cite></footer>
      </blockquote>
    </div>
  </div>

  <!-- 第二个blockquote -->
  <div class="row">
    <div class="col-md-8 mx-auto">
      <blockquote>
        <p>Your second quote content goes here.</p>
        <footer class="blockquote-footer"><cite>Another Author</cite></footer>
      </blockquote>
    </div>
  </div>
</div>

• col-md-8：控制blockquote在中等屏幕及以上设备上占用8列宽度，你可以根据需求换成col-lg-6、col-sm-10等，调整合适的宽度
• mx-auto：Bootstrap内置类，自动设置左右margin为auto，实现列的水平居中，这样整个blockquote就跟着居中了，而文本依然保持默认的左对齐

方法二：自定义CSS类 #

如果不想用网格系统，也可以给blockquote添加自定义样式，直接控制它的宽度和居中：

首先添加CSS：

.centered-blockquote {
  max-width: 750px; /* 按需调整最大宽度 */
  margin: 0 auto; /* 左右margin自动，实现居中 */
  /* 不用额外设置text-align，因为Bootstrap的blockquote默认就是text-left */
}

然后在HTML里给blockquote加上这个类：

<blockquote class="centered-blockquote">
  <p>A wise man proportions his belief to the evidence.</p>
  <footer class="blockquote-footer"><cite>David Hume</cite></footer>
</blockquote>

<blockquote class="centered-blockquote">
  <p>Your second quote content goes here.</p>
  <footer class="blockquote-footer"><cite>Another Author</cite></footer>
</blockquote>

注意事项 #

• 不要给blockquote或父容器加text-center类，否则会让文本也居中，违背你的需求
• 两种方法都能保持Bootstrap blockquote的默认样式（比如边框、字体样式等），只是调整了整体的居中效果

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