Bootstrap 4中如何让card内h4与img-thumbnail右对齐？

嘿，这个需求其实用Bootstrap 4自带的工具类就能轻松搞定，不用写额外的自定义CSS，给你两种靠谱的方案：

方案一：直接给目标元素加文本右对齐工具类 #

Bootstrap 4提供了text-right工具类，直接把它加到你需要右对齐的img-thumbnail和card-title上就行，简单直接：

<div class="card-deck">
  <div class="card">
    <img class="img-thumbnail text-right" src="img/camera.svg" alt="IMG ALT TEXT">
    <h4 class="card-title text-right">Header</h4>
    <div class="card-block">
      <p class="card-text">More Text Here</p>
    </div>
  </div>
</div>

方案二：用Flex布局统一控制卡片内元素对齐 #

如果你希望卡片内所有元素默认右对齐（后续新增元素也自动生效），可以利用Bootstrap的flex工具类改造卡片容器：

<div class="card-deck">
  <div class="card d-flex flex-column align-items-end">
    <img class="img-thumbnail" src="img/camera.svg" alt="IMG ALT TEXT">
    <h4 class="card-title">Header</h4>
    <!-- 如果希望card-block保持左对齐，给它加align-self-start -->
    <div class="card-block align-self-start">
      <p class="card-text">More Text Here</p>
    </div>
  </div>
</div>

这里d-flex把卡片变成flex容器，flex-column让子元素垂直排列，align-items-end实现水平方向的右对齐。如果卡片内容区（card-block）不需要右对齐，加个align-self-start就能恢复左对齐。

备选：自定义CSS（不推荐） #

要是你一定要用自定义样式，也可以写个简单的CSS规则，但还是优先用Bootstrap工具类更符合框架设计：

.card .img-thumbnail,
.card .card-title {
  text-align: right;
}

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