垂直按钮组内的Bootstrap按钮组

Question

我想创建一个垂直按钮组，其中包含一个水平按钮组，里面有几个按钮。我的尝试看起来像这样：

  <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在一行中。

Answer 1

将您的按钮组括在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

新Codepen