如何实现Angular-Bootstrap的div右对齐且内容左对齐，右侧面板键值项左对齐？

嘿，针对你提出的两个布局问题，我整理了贴合Bootstrap特性的具体解决方案，让布局更规范且易维护：

1. 实现div向右对齐，内部内容左对齐 #

你当前用float:right来让元素靠右，虽然能实现效果，但float容易引发布局塌陷问题，更推荐用Bootstrap原生的flex布局类来实现：

方案一：用Bootstrap内置类（无需额外CSS） #

直接给目标div添加d-flex justify-content-end类，这个组合会让容器整体向右对齐，内部内容默认保持左对齐（除非你主动修改了对齐样式）：

<div class="d-flex justify-content-end">
  <!-- 内部内容会自动左对齐 -->
  <p>这是内部左对齐的内容</p>
</div>

方案二：自定义CSS（如果你需要更灵活的控制） #

删掉原.text-right类里的float:right，改用flex布局：

.text-right-container {
  display: flex;
  justify-content: flex-end; /* 容器整体向右对齐 */
}
.text-right-container > * {
  text-align: left; /* 强制内部所有内容左对齐 */
}

2. 让右侧面板的键值项都左对齐 #

你当前的代码里给<label>加了.text-right类，这会导致值右对齐，同时<p>和<label>嵌套col-md-6的写法也容易造成布局混乱。我们用Bootstrap栅格系统重新组织结构，确保键和值都左对齐：

修改后的完整HTML代码 #

<!-- 右侧面板开始 -->
<div class="col-md-3">
  <div class="row">
    <div class="col-md-12">
      <div *ngIf="sup" class="supp-det">
        <div class="slp-section-right-image sup-logo text-center">
          <img src="{{sup.logo}}">
        </div>
        <hr/>
        <div class="sup-details">
          <!-- 每个键值对用row包裹，拆分列并设置左对齐 -->
          <div class="row mb-2">
            <div class="col-md-4 text-left">Name :</div>
            <div class="col-md-8 text-left">{{sup.supplierName}}</div>
          </div>
          <div class="row mb-2">
            <div class="col-md-4 text-left">Email :</div>
            <div class="col-md-8 text-left">{{sup.emailId}}</div>
          </div>
          <div class="row mb-2">
            <div class="col-md-4 text-left">Phone :</div>
            <div class="col-md-8 text-left">{{sup.phoneNo}}</div>
          </div>
          <div class="row mb-2">
            <div class="col-md-4 text-left">Fax :</div>
            <div class="col-md-8 text-left">{{sup.fax}}</div>
          </div>
          <hr/>
          <div class="row mb-2">
            <div class="col-md-4 text-left">Office Address :</div>
            <div class="col-md-8 text-left">{{sup.officeAddress}}</div>
          </div>
          <div class="row mb-2">
            <div class="col-md-4 text-left">Point of Contact :</div>
            <div class="col-md-8 text-left">{{sup.pointofcontact}}</div>
          </div>
          <div class="row mb-2">
            <div class="col-md-4 text-left">Engagement ID :</div>
            <div class="col-md-8 text-left">{{sup.engagementId}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- 右侧面板结束 -->

改动说明： #

• 把原<p>标签换成<div class="row">，避免段落标签的默认间距干扰布局
• 键和值分别放在col-md-4和col-md-8（可根据需求调整列宽），统一添加text-left确保左对齐
• 给每个row加mb-2（Bootstrap的margin-bottom类），让键值对之间保持合适的垂直间距

这样调整后，既能完美满足你的两个布局需求，又符合Bootstrap的布局规范，减少自定义CSS的冗余。

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