獲取twitter bootstrap btn-group像下拉菜單一樣使用分組導航欄

我一直試圖讓Twitter Bootstrap btn-group的下拉菜單爲有多個下拉菜單的按鈕工作。獲取twitter bootstrap btn-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/

這將顯示一個按鈕組。我希望該組中的某些按鈕具有下拉菜單。

什麼，我想實現的一個例子是： enter image description here

注：分組按鈕「欄」不應該有圓了Cornes當按鈕旁邊另一個按鈕。（右邊）。

來源

2012-06-17 Jeremy

我已經創建了一個類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/

來源

2012-06-18 21:36:25 baptme

注意兩個按鈕都會切換下拉菜單？ – Jeremy

@JeremyChild這是因爲.dropdown-toggle必須是自己的.btn-group。我用更新後的代碼編輯了我的答案。 – baptme

的Bootstrap documentation的按鈕組指出這一點：

與下拉菜單

按鈕必須在.btn - 工具欄進行適當的渲染內能夠單獨包裹在自己的 .btn組。

很明顯，如果你這樣做，那麼每個按鈕分開，即你失去了工具欄效果。所以看起來你不能在同一個工具欄中有多個下拉菜單 - 我想這是Bootstrap如何實現下拉菜單的限制。

您可以在nav-bar中有多個下拉菜單，因此您可以使用該下拉菜單。

來源

2012-06-17 11:26:42

的感謝！我已經使用導航欄和一些廣泛的CSS調整，使其看起來像一個按鈕組。謝謝你的幫助！ – Jeremy

只需使用：

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

來源

2013-01-08 00:08:12 Amorphous

添加這個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; 
}

它的外觀

enter image description here

來源

2013-01-31 17:31:21

謝謝Alexey！ – Jeremy

獲取twitter bootstrap btn-group像下拉菜單一樣使用分組導航欄

回答

相關問題