并排按钮 - 自举3

Question

看看下面的例子.

链接到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