html - 如何在 Bootstrap 4 中右对齐文本？

Question

我有以下文本链接列表出现在 col-md-3 中。我想将它们显示为右对齐。请参阅下面的附图。

当前编码如下所示，在 col-md-3 中带有“text-right”，我尝试过 text-justify 似乎也没有工作，

关于如何以我想要的方式制作图像的任何想法？我应该使用 a'<ul>'还是'<li>'代替？

<div class="col-md-3 mt-2 text-right">
   <div class="row mt-3">
      <div class="col-md-12">
         <b>View Profile</b>
      </div>
   </div>
   <div class="row mt-3">
      <div class="col-md-12">   
         <b>Send Message</b> 
      </div>
   </div>
   ....
   <div class="row mt-3">
      <div class="col-md-12">
         <b> View Proposal </b>
      </div>
   </div>
</div>

标签： htmlcsstwitter-bootstrap

Answer 1

我刚刚更新了我的 Codepen：https ://codepen.io/shnigi/pen/jOWmqLe 这真的取决于您希望如何放置网格以及它们将拥有多少内容。

<div class="col-md-12 row">
   <div class="col-md-3 offset-9 text-right">
         <b>View Profile</b>
   </div>
</div>

<div class="col-md-12 row">
   <div class="col-md-3 offset-9 text-right">   
      <b>Send Message</b> 
   </div>
</div>
  
<div class="col-md-12 row">
   <div class="col-md-3 offset-9 text-right">
     <b>View Proposal</b>
   </div>
</div>

在这里，我创建了三行，它们都跨越 12 列。然后在行内，我有跨越 3 列的元素，偏移量为 9，总共 12 列。然后我放置了 text-right 以使文本浮动在 3 列元素内的右侧。