Bootstrap 4中如何让col-md-3右对齐及行内数值172.21居右

我来帮你搞定这两个布局问题，直接上实用方案：

问题1：通用方法让col-md-3元素右侧对齐 #

Bootstrap 4内置了响应式的文本对齐类，最直接的方式就是给目标列添加text-md-right类——这个类会在屏幕宽度≥768px（md断点）时让文本/内容右对齐，小屏幕下自动回到左对齐，完美适配响应式需求。

如果你的需求是让整个列的容器本身靠右（而非仅内部文本），可以给列添加ml-auto类（利用flex布局的margin-left:auto特性），不过大部分场景下文本对齐类就足够满足需求。

问题2：针对你提供的代码修改 #

你的现有代码里，要让包含172.21的col-md-3在行内靠右，同时还要保证整行元素垂直居中（避免不同h4高度导致的布局错位），修改后的代码如下：

<div class="row align-items-center">
  <div class="col-md-6">
    <h4>Status</h4>
    <input type="checkbox" disabled checked data-toggle="toggle" data-onstyle="outline-success" data-offstyle="outline-danger">
  </div>
  <div class="col-md-3">
    <h4>Max Demand </h4>
  </div>
  <div class="col-md-3 text-md-right">
    <h4>172.21</h4>
  </div>
</div>

修改说明： #

• 给row添加align-items-center类：借助Bootstrap的flex布局特性，让行内所有列的内容垂直居中，解决不同h4可能带来的布局错位问题。
• 给第三个col-md-3添加text-md-right类：在md及以上屏幕尺寸下，让172.21靠右对齐；如果需要在所有屏幕尺寸下都保持靠右，直接换成text-right即可。

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