IT源码网

css 并排对齐按钮 bootstrap 3

mfryf 2023年05月26日 编程语言 8 0

看看下面的例子。

Link to Bootply

我想要 <a>标签在Button 2之外.

请您参考如下方法:

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


评论关闭
IT源码网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!