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 上使用对齐文本、浮动、边距等的组合，以使事情变成我想要的方式，但没有任何效果。

我希望更熟悉 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 收缩来使列的宽度适合其内容
• ml-auto 使用左边距将第 3 列推到右侧

Answer 2

您可以将您的地址包装在一些元素中，例如div，然后将这些类添加到父列d-flex justify-content-start justify-content-sm-end

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col" id="business">Acme Inc</div>
  <div class="col" id="proprietor">Wile E. Coyote</div>
  <div class="col d-flex justify-content-start justify-content-sm-end" id="address">
    <div>
    123 Canyon Drive<br>
    Roadrunner, AZ<br> 
    Phone (222) 222-2222 <br>
    Fax (222) 222-2223 <br>
    acme@gmail.com
    </div>
  </div>
</div>