我想创建一个垂直按钮组，其中包含一个水平按钮组，并在其中包含一些按钮。我的尝试看起来像这样：
<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>
检查Codepen。您可能想以所需的方式更改宽度/边框。
编辑
至于没有四舍五入的按钮，这是负责它的类，您可以更改它：
.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
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句