Bootstrap网格对齐问题：左对齐1个元素同时居中另外2个，不理解col系统

核心问题说明 #

你原来的写法中三个.col默认等分整行宽度，每个列仅占页面1/3宽度，因此item2、item3只能在各自的小列内调整位置，无法实现整体在页面居中的效果。

方案1：自适应列宽+弹性布局（推荐） #

该方案item1宽度随内容自动撑开，不挤占多余空间，item2、item3整体在页面剩余区域居中：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="container w-100">
  <div class="row">
    <!-- 第一个元素左对齐，列宽随内容自适应 -->
    <div class="col-auto">
      item 1
    </div>
    <!-- 占满剩余宽度，内部元素居中排列 -->
    <div class="col d-flex justify-content-center">
      <div>item 2</div>
      <div class="ml-4">item 3</div>
    </div>
  </div>
</div>

类名说明 #

• .col-auto：列宽由内容自动决定，不会占据多余空白
• justify-content-center：弹性容器内的子元素整体水平居中
• ml-4：设置item2和item3的左外边距，调整两者间距，可按需修改数值

方案2：固定栅格比例实现 #

如果需要严格控制各列宽度，可以用Bootstrap 12等份栅格规则分配宽度：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="container w-100">
  <div class="row">
    <!-- 占12份中的3份宽度 -->
    <div class="col-3">
      item 1
    </div>
    <!-- 各占3份宽度，内容居中 -->
    <div class="col-3 text-center">
      item 2
    </div>
    <div class="col-3 text-center">
      item 3
    </div>
    <!-- 剩余3份留白，保证中间两列整体居中 -->
    <div class="col-3"></div>
  </div>
</div>

栅格规则说明 #

Bootstrap的栅格系统默认将一行划分为12等份，给列添加col-[数值]类即可分配对应份数的宽度，同一行内所有列的数值总和不超过12即可。

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