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 class:

<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。您可能想按您想要的方式更改 width/border。

编辑

至于按钮没有圆角，这里是class负责的，你可以改一下：

.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
    border-radius: 0;
}

从 bootstrap.css 开始，btn class 有一个 border-radius: 4px :

.btn {
    ...
    border: 1px solid transparent;
    border-radius: 4px;
}

您可以删除所有半径或将第二个按钮更改为具有相同的 border-radius

新建Codepen

Bootstrap 垂直按钮组内的按钮组

Bootstrap button group inside vertical button group

css

twitter-bootstrap

buttongroup