如何在宽度可变的容器中的左侧，中部和右侧的同一行中放置三个按钮? [英] How can I place three buttons in the same row at the left, middle and right in a fluid-width container?

问题描述

我在Twitter Bootstrap环境中使用LESS，但是我也接受直接的CSS答案.

I'm using LESS in a Twitter Bootstrap environment, but I'd accept straight CSS answers as well.

| Fluid-width container                            |
|                                                  |
| [Btn1]               [Btn2]               [Btn3] |
|                                                  |

另一个宽度:

| Fluid-width container                |
|                                      |
| [Btn1]         [Btn2]         [Btn3] |
|                                      |

推荐答案

在我看来，您可以使用如下的股票自举环境来做到这一点:

In my opinion you can do this with a stock bootstrap environment like this:

<div class="row-fluid">
  <div class="span4 text-left"><a href="#" class="btn">Btn1</a></div>
  <div class="span4 text-center"><a href="#" class="btn">Btn2</a></div>
  <div class="span4 text-right"><a href="#" class="btn">Btn3</a></div>
</div>

这使得三个<div>的span4列构成了用于引导的十二列网格.

This makes three <div>'s that span4 columns that make up the twelve column grid for bootstrap.

您不需要添加任何额外的CSS，因为.text-left，right和center类随引导程序一起提供.

You don't need to add any extra CSS as those .text-left, right and center classes ship with bootstrap.

这篇关于如何在宽度可变的容器中的左侧，中部和右侧的同一行中放置三个按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！