Bootstrap 2.3.2中的垂直组按钮

时间:2014-09-20 19:00:19

标签: javascript html css twitter-bootstrap-2

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

这是我想要实现的目标:

http://jsfiddle.net/Lc9012o6/

这是Bootstrap 2.3.2中的同一组按钮

http://jsfiddle.net/999tv48t/

<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/

1 个答案:

答案 0 :(得分: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;
}
相关问题