twitter-bootstrap 如何将两个col向右对齐?引导程序 3 网格

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/22236978/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 20:13:51  来源:igfitidea点击:

How to align two col to the right? bootstrap 3 grid

twitter-bootstraptwitter-bootstrap-3

提问by user2998105

I have three columns displayed in one row, I need to align last two to the right corner, it works fine with one column but when I try to pull-right two it messes up grid and pushes elements to the next row down. The question is how to align one column to the right and other next to it.

我在一行中显示了三列,我需要将最后两列与右角对齐,它可以很好地处理一列,但是当我尝试向右拉两列时,它会弄乱网格并将元素向下推到下一行。问题是如何将一列向右对齐,另一列与它相邻。

       <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>

Current:

当前的:

|[     ]       [      ]       [     ]|

Wanted:

通缉:

|[     ]              [      ][     ]|

回答by Zim

It depends on whether you're right aligning text inside the middle column, or some another container inside the column.. Here are a few examples that may work for you..

这取决于您是在中间列内正确对齐文本,还是在列内的其他容器中对齐..以下是一些可能适合您的示例..

http://www.bootply.com/119747

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>

回答by molikh

Use lower col size with offset like this:

使用较低的 col 大小和这样的偏移量:

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