Bootstrap 4列无法居中：如何使两行在页面居中且容器内左对齐

嘿，我完全get到你的需求了——要让那两块导航内容整体在container里居中，但里面的列表项还是保持左对齐，对吧？咱们用Bootstrap就能轻松搞定，给你两种可行的方案：

方案一：用Bootstrap内置的网格类调整 #

你可以给包裹导航的列设置一个固定的宽度（比如col-md-6），然后通过外层的row justify-content-center让这个列在容器里居中，列内部的内容默认就是左对齐的，完美符合你的要求：

<div class="container">
  <div class="row justify-content-center menufoot">
    <!-- 用col-md-6限制宽度，同时让列水平居中 -->
    <div class="col-md-6">
      <div class="row menurow">
        <div class="col-sm-auto">
          <nav>
            <ul class="list-unstyled">
              <li><a href="#" style="font-weight: bold">Quienes Somos</a></li>
              <li><a href="#">Nuestra Historia</a></li>
              <!-- 你的其他列表项 -->
            </ul>
          </nav>
        </div>
        <!-- 第二个导航列 -->
        <div class="col-sm-auto">
          <nav>
            <ul class="list-unstyled">
              <li><a href="#" style="font-weight: bold">Servicios</a></li>
              <li><a href="#">Consultoría</a></li>
              <!-- 你的其他列表项 -->
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </div>
</div>

为什么这样有效？ #

• row justify-content-center会让它的子列（也就是col-md-6）在水平方向上居中
• col-md-6给你的导航内容设置了一个合适的宽度（中等屏幕及以上占容器宽度的一半），避免内容拉得太宽
• 列内部的导航列表因为没有被设置text-center类，默认保持左对齐

方案二：自定义CSS类实现 #

如果你不想依赖Bootstrap的网格宽度，也可以自己写一个简单的CSS类来控制：

/* 自定义居中容器类 */
.centered-content {
  max-width: 700px; /* 根据你的需求调整最大宽度 */
  margin: 0 auto; /* 水平居中 */
}

然后把你的代码改成这样：

<div class="container">
  <!-- 用自定义类让内容块居中 -->
  <div class="centered-content menufoot">
    <div class="row menurow">
      <div class="col-sm-auto">
        <nav>
          <ul class="list-unstyled">
            <li><a href="#" style="font-weight: bold">Quienes Somos</a></li>
            <li><a href="#">Nuestra Historia</a></li>
            <!-- 你的其他列表项 -->
          </ul>
        </nav>
      </div>
      <!-- 第二个导航列 -->
      <div class="col-sm-auto">
        <nav>
          <ul class="list-unstyled">
            <li><a href="#" style="font-weight: bold">Servicios</a></li>
            <li><a href="#">Consultoría</a></li>
            <!-- 你的其他列表项 -->
          </ul>
        </nav>
      </div>
    </div>
  </div>
</div>

这个方案更灵活，你可以通过调整max-width来精准控制内容块的宽度，同样能实现整体居中、内部左对齐的效果。

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