Question

我在Twitter Bootstrap环境中使用LESS，但我也接受直接CSS个答案。

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

另一个宽度：

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

Answer 1

在我看来，你可以用这样的股票引导环境来做到这一点：

<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列构成了引导程序的十二列网格。

您不需要添加任何额外的CSS，因为.text-left，right和center类随附bootstrap。

Answer 2

http://jsfiddle.net/GNPpX/1/

你可以使用浮动

来做到这一点

<div class='container'>
    <button id="btn1">one</button>
    <button id="btn2">two</button>
    <button id="btn3">three</button>
</div>


.container{
    width: 100%;
    float: left;
    border: solid 1px blue;
    text-align: center;
}
.container button{
    display: inline-block;
}
#btn1{
    float:left;
}
#btn3{
    float:right;
}

Answer 3

我认为这可能是最简单的方法......

HTML

请注意，嵌套元素是inline元素

<div>
    <span>item1</span>
    <span>item2</span>
    <span>item3</span>
</div>

CSS

div
{
    border: 1px solid lime;
    text-align: center;
}

span
{
    background-color: #ff8;
}

span:first-child
{
    background-color: #f8f;
    float: left;
}

span:last-child
{
    background-color: #8ff;
    float: right;
}

的jsfiddle

http://jsfiddle.net/TUwek/

Answer 4

我不知道它是否正是您想要的，但在父级上使用display: table;并在子级上使用display: table-cell会为您提供这样的渲染：

HTML：

<ul>
    <li class="left"><button>BTN1</button></li>
    <li><button>BTN2</button></li>
    <li class="right"><button>BTN3</button></li>
</ul>

CSS：

ul {
    display: table;
    width: 60%;
}
li {
    display: table-cell;
}
li.left {text-align: left;}
li.right {text-align: right;}

<强> The Fiddle

Answer 5

我得到了以下内容：

<style>
    .center { text-align: center; }
    .right { text-align: right; }
</style>

<div class="row-fluid">
    <div class="span4"><button>One</button></div>
    <div class="span4 center"><button>Two</button></div>
    <div class="span4 right"><button>Three</button></div>
</div>

Answer 6

http://jsfiddle.net/feitla/yvXdc/1/

你走了：

<div class="container">
    <div class="container-fluid full-width">
        <div class="row-fluid">
            <button class="btn pull-left">button 1</button>
            <button class="btn">button 2</button>
            <button class="btn pull-right">button 3</button>
        </div>
    </div>
</div>

.container {
   text-align:center;
} 
 button {
     display:inline-block;
}

如何在流体宽度容器中的左侧，中间和右侧的同一行中放置三个按钮？

6 个答案:

HTML

CSS

的jsfiddle