我想创建一个垂直按钮组,其中包含一个水平按钮组,里面有几个按钮。我的尝试如下所示:
<div class="btn-group-vertical">
<div class="btn-group">
<button type="button" class="btn btn-primary" style="width : 60%">Row 1.1</button>
<button type="button" class="btn btn-primary" style="width : 40%">Row 1.2</button>
</div>
<button type="button" class="btn btn-primary">Row 2</button>
<button type="button" class="btn btn-primary">Row 3</button>
</div>
我希望按钮Row 1.1
和Row 1.2
在一行中。
将按钮组括在row
类中:
<div class="row">
<div class="btn-group">
<button type="button" class="btn btn-primary" style="width : 60%">Row 1.1</button>
<button type="button" class="btn btn-primary" style="width : 40%">Row 1.2</button>
</div>
</div>
检查代码笔。您可能希望按照所需的方式更改宽度/边框。
编辑
至于按钮没有四舍五入,这里是负责它的类,你可以更改它:
.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
border-radius: 0;
}
从bootstrap.css
开始,btn
类有一个border-radius: 4px
:
.btn {
...
border: 1px solid transparent;
border-radius: 4px;
}
您可以删除所有半径,也可以更改第二个按钮以具有相同的border-radius
新代码笔