Bootstrap4在一行的一列中右对齐文本

2024-05-17 • 问答

我是第一次开始使用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上使用align-text，float，margin等的组合，以使事情变成我想要的方式，但没有任何效果。

我希望对引导程序更熟悉的人可以告诉我我所缺少的内容。

您可以使用自动布局（col-*和col-*-auto）列。在移动设备上，由于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使用弯曲收缩使列的宽度适合其内容
ml-auto使用左边距将第3列向右推

您可以将地址包装在某些元素中，例如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>

Bootstrap4在一行的一列中右对齐文本

ccl200667 回答：Bootstrap4在一行的一列中右对齐文本

大家都在问