Question

Bootstrap 3有CSS类btn-group-vertical。你能帮帮我吗，我怎样才能在Bootstrap 2.3.2中获得相同的结果？

这是我想要实现的目标：

这是Bootstrap 2.3.2中的同一组按钮

<div class="btn-group-vertical">
    <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
          Add
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" >
          <li><a href="#">Vertex</a></li>
          <li><a href="#">Edge</a></li>
        </ul>
    </div>

    <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
          Update
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" >
          <li><a href="#">Vertex</a></li>
          <li><a href="#">Edge</a></li>
        </ul>
    </div>

    <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
          Remove
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" >
          <li><a href="#">Vertex</a></li>
          <li><a href="#">Edge</a></li>
        </ul>
    </div>

    <button type="button" class="btn btn-default">Merge vertices</button>
</div>

修改

当我使用css类btn-group btn-group-vertical时，下拉按钮的行为很奇怪http://jsfiddle.net/q0r49anL/

Answer 1

这是.btn-group-vertical class的CSS更新：

.btn-group-vertical > .btn + .btn, .btn-group-vertical > .btn + .btn-group, .btn-group-vertical > .btn-group + .btn, .btn-group-vertical > .btn-group + .btn-group {
    margin-top: -1px;
    margin-left: 0;
    display: block;
}

.btn-group-vertical>.btn:last-child {
    border-radius: 4px;
}

实时预览：http://jsfiddle.net/999tv48t/5/

Bootstrap 2.3.2中的垂直组按钮

1 个答案: