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

Question

我有下面的文本链接列表出现在一个col md-3。我想让它们看起来是正确的。请看下面的附图。

当前的编码方式类似于下面的col 3中的"text-right“，我也尝试了text-justify，但似乎不起作用，

有没有办法让它变成我想要的图像?我应该使用'<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>

​

​

Answer 1

不要在容器上使用text-right。相反，将col-md-12 div转换为col-md-6并使用offset，即offset-6。现在元素占据了6列，偏移了6列，这使它位于其父元素的右侧。

有关偏移量的更多信息可以在Bootstrap Grid documentation的中途找到。

下面是演示如何做到这一点的代码：

<div class="col-md-3 mt-2 container">
   <div class="row mt-3">
      <div class="col-md-6 offset-6 inner">
         <b>View Profile</b>
      </div>
   </div>
   <div class="row mt-3">
      <div class="col-md-6 offset-6 inner">   
         <b>Send Message</b> 
      </div>
   </div>
   <div class="row mt-3">
      <div class="col-md-6 offset-6 inner">
         <b> View Proposal </b>
      </div>
   </div>
</div>

Here it is on Codepen

Answer 2

我刚刚更新了我的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列元素中的右侧。