javascript - 获取 twitter bootstrap btn-group 以像带有下拉菜单的分组导航栏一样操作

Question

我一直在尝试让带有下拉菜单的 Twitter Bootstrapbtn-group用于具有下拉菜单的多个按钮。

例子：

  <div class="btn-group">
      <a href="#" class="btn">1</a>
      <a href="#" class="btn">2</a>
      <a href="#" class="btn">3</a>
      <a href="#" class="btn">4</a>
      <a href="#" class="btn">5</a>
  </div>

还有我的尝试：http: //jsfiddle.net/x2BGB/

这将显示一个按钮组。我希望该组中的某些按钮具有下拉菜单。

我想要实现的一个例子是：

注意：当一个按钮靠近另一个按钮时，分组按钮“栏”不应有圆角。（右边）。

Answer 1

我创建了一个类 btn-toolbar2 以避免冲突并覆盖 btn-toolbar 默认行为。

下拉菜单必须在它们自己的 btn 组中。

<div class="btn-toolbar btn-toolbar2">
  <div class="btn-group">
    <button class="btn">Dashboard</button>
  </div>
  <div class="btn-group">
    <button class="btn">Button 1</button>
    <button class="btn dropdown-toggle" data-toggle="dropdown">
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li><li><a href="#">Separated link</a></li>
    </ul>
  </div>
  <div class="btn-group">
    <button class="btn">Item 3</button>
    <button class="btn dropdown-toggle" data-toggle="dropdown">
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div>
</div>

与CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.btn-toolbar2 >.btn-group + .btn-group {
margin-left: -5px;
}

.btn-toolbar2 > .btn-group > .btn, .btn-toolbar2 > .btn-group > .dropdown-toggle
{
    -webkit-border-radius: 0px;
    border-radius: 0px;
    -moz-border-radius: 0px;
}

.btn-toolbar2 > .btn-group:first-child > .btn, .btn-toolbar2 > .btn-group:first-child > .dropdown-toggle{
    -webkit-border-bottom-left-radius: 4px;
    border-bottom-left-radius: 4px;
    -webkit-border-top-left-radius: 4px;
    border-top-left-radius: 4px;
    -moz-border-radius-bottomleft: 4px;
    -moz-border-radius-topleft: 4px;    
}

.btn-toolbar2 > .btn-group:last-child > .btn:last-child, .btn-toolbar2 > .btn-group:last-child > .dropdown-toggle:nth-last-child(2){
    -webkit-border-bottom-right-radius: 4px;
    border-bottom-right-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    border-top-right-radius: 4px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-topright: 4px;    
}

http://jsfiddle.net/baptme/x2BGB/4/

Answer 2

按钮组的引导文档说明了这一点：

带有下拉菜单的按钮必须单独包装在 .btn-toolbar 内自己的 .btn-group 中，以便正确呈现。

显然，如果你这样做，那么每个按钮都是分开的，即你失去了工具栏的效果。所以看起来你不能在同一个工具栏中有多个下拉菜单 - 我想这是 Bootstrap 如何实现下拉菜单的限制。

您可以在nav-bar中有多个下拉菜单，因此您可以改用它。

Answer 3

只需使用：

  <div class="btn-group">
      <button class="btn" onclick="window.location.href='http://whatever.location';">
       ...
       ...
  </div>

Answer 4

添加这个 CSS 来修复它：

.btn-group > .btn-group {
  float: left;
}
.btn-group > .btn-group > .dropdown-toggle {
  .border-radius(0);
}
.btn-group > .btn-group > .dropdown-toggle:first-child {
     -webkit-border-top-left-radius: 4px;
         -moz-border-radius-topleft: 4px;
             border-top-left-radius: 4px;
  -webkit-border-bottom-left-radius: 4px;
      -moz-border-radius-bottomleft: 4px;
          border-bottom-left-radius: 4px;  
}
.btn-group > .btn-group > .dropdown-toggle:last-child {
     -webkit-border-top-right-radius: 4px;
         -moz-border-radius-topright: 4px;
             border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
      -moz-border-radius-bottomright: 4px;
          border-bottom-right-radius: 4px;
}

它看起来如何