Cách tạo nhóm nút bằng một nút có menu thả xuống?

Question

Cách tạo nhóm nút bằng một nút có menu thả xuống? Tôi hỏi vì trong tình huống này menu xuất hiện không dưới/dưới nút nhưng ở biên giới trang bên trái. Nếu tôi xóa lớp nút nhóm (class = "btn-group") (tôi nhận được nút độc lập) trình đơn thả xuống xuất hiện chính xác? Có cách nào để quản lý việc này không?

Đây là liên kết đến trang hướng dẫn sử dụng nhóm nút chỉ để tham khảo ý tôi.

Answer 1

Câu trả lời đúng cho bootstrap 3,0 là ở đây:

Nested Button Groups

Không cần phải thay đổi CSS:

<div class="btn-group"> 
    <button type="button" class="btn btn-default">1</button> 
    <button type="button" class="btn btn-default">2</button> 

    <div class="btn-group"> 
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
     Dropdown 
     <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu"> 
     <li><a href="#">Dropdown link</a></li> 
     <li><a href="#">Dropdown link</a></li> 
    </ul> 
    </div> 
</div> 

Answer 2

Thêm sau bootstrap.css:

.btn-group > .dropdown-toggle { 
    border-bottom-right-radius: 0px; 
    border-top-right-radius: 0px; 
    margin-right: -1px; 
    } 
.btn-group > .btn:last-child, .btn-group > .dropdown-toggle:nth-last-child(2) { 
    border-bottom-right-radius: 4px; 
    border-top-right-radius: 4px; } 

http://jsfiddle.net/TpYfc/17

Answer 3

tôi thêm một tùy chỉnh "nhóm thả xuống" class với "btn nhóm" div gói nút thả xuống của tôi. Bằng cách này, "thả xuống" thả xuống "của bạn có thể bị tràn ngập bởi CSS tùy chỉnh.

Vị trí trong nhóm được xử lý bởi : first-child và : cuối cùng con

Đây là hack: http://jsfiddle.net/Dk7sw/6/ (LESS MÃ sẵn quá ở phía dưới CSS)

CSS:

/* 

Twitter Bootstrap CSS modifications for having dropdown menus in 
buttons groups. 
Dropdowns menus are well positionned, under their buttons. 

LESS code at bottom 

Kure2012. 

*/ 
.btn-group.group-dropdown { 
    margin: 0px; 
    padding: 0px; 
    margin-left: -1px; 
} 
.btn-group.group-dropdown .dropdown-toggle { 
    -webkit-border-radius: 0; 
    -moz-border-radius: 0; 
    border-radius: 0; 
} 
.btn-group.group-dropdown:first-child { 
    margin: 0px; 
    padding: 0px; 
    margin-right: -1px; 
} 
.btn-group.group-dropdown:first-child .dropdown-toggle { 
    -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.group-dropdown:first-child .dropdown-toggle.btn-large { 
    -webkit-border-top-left-radius: 6px; 
    -moz-border-radius-topleft: 6px; 
    border-top-left-radius: 6px; 
    -webkit-border-bottom-left-radius: 6px; 
    -moz-border-radius-bottomleft: 6px; 
    border-bottom-left-radius: 6px; 
} 
.btn-group.group-dropdown:last-child { 
    margin: 0px; 
    padding: 0px; 
    margin-left: -1px; 
} 
.btn-group.group-dropdown:last-child .dropdown-toggle { 
    -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; 
} 
.btn-group.group-dropdown:last-child .dropdown-toggle.btn-large { 
    -webkit-border-top-right-radius: 6px; 
    -moz-border-radius-topright: 6px; 
    border-top-right-radius: 6px; 
    -webkit-border-bottom-right-radius: 6px; 
    -moz-border-radius-bottomright: 6px; 
    border-bottom-right-radius: 6px; 
} 

/* And the LESS Code : 
.btn-group{ 
    &.group-dropdown{ 
     margin:0px; 
     padding:0px; 
     margin-left:-1px; 
     .dropdown-toggle{ 
      .border-radius(0); 
     } 
     &:first-child{ 
      margin:0px; 
      padding:0px; 
      margin-right:-1px; 
      .dropdown-toggle{ 
       .border-top-left-radius(4px); 
       .border-bottom-left-radius(4px); 
       &.btn-large{ 
        .border-top-left-radius(6px); 
        .border-bottom-left-radius(6px); 
       } 
      }     
     } 
     &:last-child{ 
      margin:0px; 
      padding:0px; 
      margin-left:-1px; 
      .dropdown-toggle{ 
       .border-top-right-radius(4px); 
       .border-bottom-right-radius(4px); 
       &.btn-large{ 
        .border-top-right-radius(6px); 
        .border-bottom-right-radius(6px); 
       } 
      } 
     } 
    }  
} 

Và HTML:

<!-- 

Custom HTML : add a "group-dropdown" class to the dropdown 
"btn-group" div. 
The "btn-group" div must wrap the whole button (button+submenu items), as specified in the bootstrap doc. This allows you to put several dropdowns in the same buttons group. 

Works whatever their position in the button group is. 

--> 

<!--- 
Here starts the button group 
--> 
<div class="btn-group"> 
    <!--First dropdown : note the "group-dropdown" property --> 
    <div class="btn-group group-dropdown"> 
     <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#" title="Filter by"> 
      <i class="icon icon-filter"></i> 
      <span class="caret"></span> 
     </a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">All</a></li> 
      <li><a href="#">...</a></li> 
     </ul> 
    </div> 

    <!-- Classic button --> 
    <a href="#" class="btn btn-mini" title="New"> 
     <i class="icon-plus-sign"></i> 
    </a> 

    <!-- Classic button --> 
    <a href="#" class="btn btn-mini" title="Import"> 
     <i class="icon-upload"></i> 
    </a> 

    <!-- Dropdown in the middle of the button group --> 
    <div class="btn-group group-dropdown"> 
     <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#" title="Export"> 
      <i class="icon icon-download"></i> 
      <span class="caret"></span> 
     </a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">.csv file</a></li> 
      <li><a href="#">.json file</a></li> 
      <li><a href="#">.ods file</a></li> 
      <li><a href="#">.xml file</a></li> 
      <li><a href="#">.sql file</a></li> 
     </ul> 
    </div> 

    <!-- Dropdown at the end of the button group --> 
    <div class="btn-group group-dropdown"> 
     <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#" title="Another action"> 
      <i class="icon icon-home"></i> 
      <span class="caret"></span> 
     </a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">Custom menu</a></li> 
      <li><a href="#">Custom menu</a></li> 
      <li><a href="#">Custom menu</a></li> 
     </ul> 
    </div> 

</div> 

Answer 4

Đây là mã từ liên kết ở trên:

<style> 
.btn-custom-toolbar > .btn-group { 
margin-left: 0px; 
margin-right: 0px; 
} 
.btn-custom-toolbar > .btn-group > .btn, .btn-custom-toolbar > .btn-group >    .dropdown-toggle 
{ 
-webkit-border-radius: 0px; 
border-radius: 0px; 
-moz-border-radius: 0px; 
margin-left: -1px; 
} 
.btn-custom-toolbar > .btn-group:first-child > .btn:first-child { 
-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-custom-toolbar > .btn-group:last-child > .btn { 
-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; 
} 
</style> 
<body style="padding: 30px;" 
<h1>Version with sub btns</h1> 
<div class="btn-toolbar btn-custom-toolbar"> 
<div class="btn-group"> 
<button class="btn btn-cust-first">Dropdown 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">Button 1</button> 
</div> 
<div class="btn-group"> 
<button class="btn">Dropdown 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">Dropdown 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 class="btn-group"> 
<button class="btn dropdown-toggle" data-toggle="dropdown"> 
Dropdown 3 
<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> 
</body> 

Answer 5

Giải pháp 4 dòng này là giải pháp sạch nhất đối với tôi:

.btn-group > *:not(:first-child), 
.btn-group > *:not(:first-child) .btn { 
    border-bottom-left-radius: 0; 
    border-top-left-radius: 0; 
}