如何将两列右对齐？Bootstrap 3网格系统

Question

我在一行中显示了三列内容，我需要将后两列对齐到右上角，当我尝试将两列向右对齐时，其中一列的效果是正常的，但是这样会破坏网格并使其他元素被推到下一行。问题是如何将一列对齐到右侧，将另一列放在其旁边。

       <div class="row ">
                    <div class="col-sm-4">
                    ...
                    </div>

                    <div class="col-sm-3" >
                     ...
                    </div>

                    <div class="col-sm-5 pull-right">
                        <div class=" pull-right">
                          ...
                        </div>
                    </div>
        </div>

现状：

|[     ]       [      ]       [     ]|

招聘:

|[     ]              [      ][     ]|

- user2998105

---

你能不能在中间列上添加 pull-right？ - Jason

我尝试的第一件事情是把中间列移到右上角，右侧列移到下一行。 - user2998105

可能是Bootstrap中div内左对齐和右对齐的重复问题。 - Organic Advocate

Answer 1

这取决于您是否在中间列内正确对齐文本，或者在该列内的其他容器中对齐。以下是一些可能适合您的示例。

http://www.bootply.com/119747

<div class="row ">
  <div class="col-sm-4">
    1 text here 
  </div>
  <div class="col-sm-3 text-right">
    2 text here 
  </div>
  <div class="col-sm-5">
    3 text here 
  </div>
</div>

<div class="row ">
  <div class="col-sm-4">
    <div class="well"> 
      content
    </div>
  </div>
  <div class="col-sm-3">
    <div class="well pull-right"> 
      content pull-right 
    </div>
  </div>
  <div class="col-sm-5">
    <div class="well"> 
      content
    </div>
  </div>
</div>

- Zim

Answer 2

使用偏移量的较小列大小，就像这样：

<div class="col-sm-3"></div>
<div class="col-sm-3 offset-col-sm-3"></div>
<div class="col-sm-3"></div>

- molikh