Bootstrap 4不同断点下的列内容对齐方法咨询

针对你的需求，用Bootstrap自带的响应式flex工具类就能完美解决，完全不需要写自定义CSS，这是最优雅的方案。

核心思路 #

Bootstrap提供了一套响应式的对齐工具类，格式为 justify-{breakpoint}-{alignment}，可以轻松在不同屏幕尺寸下控制flex容器内内容的对齐方式。我们只需要给列元素加上对应的工具类即可。

修改后的代码示例 #

<div class="row">
  <div class="col-md-4 d-flex justify-content-center justify-content-md-end"> 
    Email 
  </div>
</div>

类名解释 #

• d-flex：将这个列元素转换为flex容器，这样justify-content相关的属性才能生效
• justify-content-center：默认（屏幕尺寸小于md，也就是<768px）时，内容居中对齐
• justify-content-md-end：当屏幕尺寸≥md（768px）时，内容右对齐（对应CSS的justify-content: end）

适配Bootstrap 4的情况 #

如果你使用的是Bootstrap 4，命名稍有不同，需要把end换成flex-end，代码如下：

<div class="row">
  <div class="col-md-4 d-flex justify-content-center justify-content-md-flex-end"> 
    Email 
  </div>
</div>

自定义CSS方案（可选） #

如果因为某些原因不想用工具类，也可以通过媒体查询实现，但不如工具类简洁：

.col-md-4 {
  display: flex;
  justify-content: center;
}

@media (min-width: 768px) {
  .col-md-4 {
    justify-content: end;
  }
}

但还是优先推荐用Bootstrap自带的工具类，既符合框架规范，又能减少自定义代码量~

内容的提问来源于stack exchange，提问作者D.B