html - Bootstrap4 右对齐一行中的一列中的文本

Question

我刚刚开始第一次使用 Bootstrap4，并且在正确调整一行中的一列中的文本方面遇到了挑战。

我的 HTML 标记如下:

<div class="row">
  <div class="col" id="business">Acme Inc</div>
  <div class="col" id="proprietor">Wile E. Coyote</div>
  <div class="col" id="address">
  123 Canyon Drive<br>
  Roadrunner, AZ<br> 
  Phone (222) 222-2222 <br>
  Fax (222) 222-2223 <br>
  acme@gmail.com
  </div>
</div>

我想要第三列，也就是包含地址的那一列，被推过去，使最长的一行靠在该列的右端(少一点边距)，然后我想对齐剩余的行地址，以便它们从与最长行相同的位置开始。因此，所有地址行的开头与我正在创建的标题的右侧或左侧的距离相同，地址的最长行将恰好在标题的右手端之前结束。

我需要它是响应式的，这样当它在手机上时，所有三列的所有行都从标题的左侧边缘开始，如下所示:

Acme Inc

Wile E. Coyote

123 Canyon Drive
Roadrunner, AZ
Phone (222) 222-2222
Fax (222) 222-2223
acme@gmail.com

我已经无数次尝试在各种 div 上使用对齐文本、 float 、边距等的组合来使事情按照我想要的方式进行，但没有任何效果。

我希望更熟悉 bootstrap 的人可以告诉我我缺少什么。

Answer 1

您可以使用自动布局(col-* 和col-*-auto)列。在移动设备上，所有 3 列将垂直堆叠，因为 col-sm-auto 仅应用于 sm 断点和更大的...

   <div class="row">
        <div class="col-sm-auto" id="business">Acme Inc</div>
        <div class="col" id="proprietor">Wile E. Coyote</div>
        <div class="col-sm-auto ml-auto" id="address"> 123 Canyon Drive<br> Roadrunner, AZ<br> Phone (222) 222-2222 <br> Fax (222) 222-2223 <br> acme@gmail.com </div>
   </div>

https://codeply.com/p/10EYm5SDHN

• col-sm-auto 使用 flex shrink 使列的宽度适合其内容
• ml-auto 使用左边距将第 3 列推到右边