并排按钮 - 自举3

Question

看一下下面的例子。

Link to Bootply

我希望<a>标记位于Button 2之外。

Answer 1

Bootstrap使用12列网格。现在，两个按钮占据整个可用空间（均为6列宽度），第三个按钮没有空间。您可以将按钮布局为5 + 5 + 2列。例如：

<div class="col-md-6 col-md-offset-2">
    <button type="submit" class="btn btn-default btn-md col-md-5">Button 1</button>
    <button type="reset" class="btn btn-default btn-md col-md-5">Button 2</button>
    <a href="#" class="btn btn-default btn-md col-md-2"><span class="glyphicon glyphicon-search"></span></a>
</div>

演示：http://www.bootply.com/RAqyEiTp1i

您想要将第三个按钮放在行容器之外，您可以将它绝对地放在col组中：

<a href="#" class="btn btn-default btn-beside"><span class="glyphicon glyphicon-search"></span></a>

CSS：

.btn-beside {
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: -10px;
}

演示：http://www.bootply.com/5n3y1uZDng