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>

电流：

|[     ]       [      ]       [     ]|

通缉：

|[     ]              [      ][     ]|

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>

Answer 2

使用较小的col大小和偏移量，如下所示：

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

如何将两个col对齐？ bootstrap 3网格

2 个答案: