5

btn-groupドロップダウンメニューを持つ複数のボタンで動作するように、ドロップダウン付きのTwitter Bootstrap を取得しようとしています。

例：

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

ボタングループが表示されます。そのグループのいくつかのボタンにドロップダウン メニューが必要です。

私が達成しようとしているものの例は次のとおりです。 ここに画像の説明を入力

注: グループ化されたボタンの「バー」は、ボタンが別のボタンの隣にある場合、角が丸くなってはなりません。（右側）。

4

4 に答える 4

4

競合を回避し、btn-toolbar のデフォルトの動作をオーバーライドするために、クラス btn-toolbar2 を作成しました。

ドロップダウンは、独自の btn-group にある必要があります。

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

于 2012-06-18T21:36:25.827 に答える
2

この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;
}

見た目

ここに画像の説明を入力してください

于 2013-01-31T17:31:21.090 に答える
2

ボタン グループのBootstrap ドキュメントには、次のように記載されています。

ドロップダウンのあるボタンは、適切にレンダリングするために、.btn-toolbar 内の独自の .btn-group に個別にラップする必要があります。

明らかにこれを行うと、各ボタンが別々に配置されます。つまり、ツールバーの効果が失われます。したがって、同じツールバーに複数のドロップダウンを配置することはできないようです。これは、Bootstrap がドロップダウンを実装する方法の制限であると思います。

nav-barには複数のドロップダウンを含めることができるため、代わりにそれを使用できる場合があります。

于 2012-06-17T11:26:42.457 に答える
2

使用するだけです：

  <div class="btn-group">
      <button class="btn" onclick="window.location.href='http://whatever.location';">
       ...
       ...
  </div>
于 2013-01-08T00:08:12.610 に答える