Nhận nhóm btn khởi động twitter để hoạt động giống như thanh điều hướng được nhóm với các menu thả xuống

Question

Tôi đã cố gắng tải Twitter Bootstrap btn-group bằng menu thả xuống để làm việc cho nhiều nút có trình đơn thả xuống.

Ví dụ:

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

Và cũng cố gắng của tôi: http://jsfiddle.net/x2BGB/

này sẽ hiển thị một nhóm nút. Tôi muốn một số nút trong nhóm đó có trình đơn thả xuống.

Một ví dụ về những gì tôi đang cố gắng để đạt được là:

Lưu ý: nút nhóm "thanh" không nên có cornes tròn khi một nút bên cạnh nút khác. (bên phải).

Answer 1

Tôi đã tạo một lớp btn-toolbar2 để tránh xung đột và vượt qua hành vi mặc định của thanh công cụ btn-toolbar.

Danh sách thả xuống phải nằm trong nhóm btn của riêng chúng.

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

với 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

Các Bootstrap documentation cho các nhóm nút khẳng định này:

Buttons với Dropdowns phải được bọc riêng trong .btn nhóm của mình trong vòng một .btn-toolbar cho vẽ thích hợp.

Rõ ràng nếu bạn làm điều này thì mỗi nút nằm riêng biệt, tức là bạn mất hiệu ứng thanh công cụ. Vì vậy, có vẻ như bạn không thể có nhiều trình đơn thả xuống trong cùng một thanh công cụ - tôi đoán đây là một hạn chế về cách Bootstrap triển khai menu thả xuống.

Bạn có thể có nhiều menu thả xuống trong một nav-bar, do đó bạn có thể sử dụng thay vào đó.

Answer 3

Chỉ cần sử dụng:

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

Answer 4

Thêm CSS này để sửa chữa nó:

.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; 
} 

Làm thế nào nó trông