如何在Foundation 6中創建四捨五入的按鈕組？

Question

基金會5曾經有一個「圓形」類，它將按鈕組轉換爲圓形邊緣。我如何在Foundation 6上做到這一點？

Answer 1

這在基金會6中是不可能的。規則已被完全刪除，以減少文件大小。你最好的選擇是把規則複製到Foundation 6的css文件或者自定義的css文件中（這取決於你）。

這裏有你需要（從最新的基金5檔直接拍攝的，沒有變化）的CSS規則：

.button-group { 
    list-style: none; 
    margin: 0; 
    left: 0; } 
    .button-group:before, .button-group:after { 
    content: " "; 
    display: table; } 
    .button-group:after { 
    clear: both; } 
    .button-group.even-2 li { 
    display: inline-block; 
    margin: 0 -2px; 
    width: 50%; } 
    .button-group.even-2 li > button, .button-group.even-2 li .button { 
     border-left: 1px solid; 
     border-color: rgba(255, 255, 255, 0.5); } 
    .button-group.even-2 li:first-child button, .button-group.even-2 li:first-child .button { 
     border-left: 0; } 
    .button-group.even-2 li button, .button-group.even-2 li .button { 
     width: 100%; } 
    .button-group.even-3 li { 
    display: inline-block; 
    margin: 0 -2px; 
    width: 33.33333%; } 
    .button-group.even-3 li > button, .button-group.even-3 li .button { 
     border-left: 1px solid; 
     border-color: rgba(255, 255, 255, 0.5); } 
    .button-group.even-3 li:first-child button, .button-group.even-3 li:first-child .button { 
     border-left: 0; } 
    .button-group.even-3 li button, .button-group.even-3 li .button { 
     width: 100%; } 
    .button-group.even-4 li { 
    display: inline-block; 
    margin: 0 -2px; 
    width: 25%; } 
    .button-group.even-4 li > button, .button-group.even-4 li .button { 
     border-left: 1px solid; 
     border-color: rgba(255, 255, 255, 0.5); } 
    .button-group.even-4 li:first-child button, .button-group.even-4 li:first-child .button { 
     border-left: 0; } 
    .button-group.even-4 li button, .button-group.even-4 li .button { 
     width: 100%; } 
    .button-group.even-5 li { 
    display: inline-block; 
    margin: 0 -2px; 
    width: 20%; } 
    .button-group.even-5 li > button, .button-group.even-5 li .button { 
     border-left: 1px solid; 
     border-color: rgba(255, 255, 255, 0.5); } 
    .button-group.even-5 li:first-child button, .button-group.even-5 li:first-child .button { 
     border-left: 0; } 
    .button-group.even-5 li button, .button-group.even-5 li .button { 
     width: 100%; } 
    .button-group.even-6 li { 
    display: inline-block; 
    margin: 0 -2px; 
    width: 16.66667%; } 
    .button-group.even-6 li > button, .button-group.even-6 li .button { 
     border-left: 1px solid; 
     border-color: rgba(255, 255, 255, 0.5); } 
    .button-group.even-6 li:first-child button, .button-group.even-6 li:first-child .button { 
     border-left: 0; } 
    .button-group.even-6 li button, .button-group.even-6 li .button { 
     width: 100%; } 
    .button-group.even-7 li { 
    display: inline-block; 
    margin: 0 -2px; 
    width: 14.28571%; } 
    .button-group.even-7 li > button, .button-group.even-7 li .button { 
     border-left: 1px solid; 
     border-color: rgba(255, 255, 255, 0.5); } 
    .button-group.even-7 li:first-child button, .button-group.even-7 li:first-child .button { 
     border-left: 0; } 
    .button-group.even-7 li button, .button-group.even-7 li .button { 
     width: 100%; } 
    .button-group.even-8 li { 
    display: inline-block; 
    margin: 0 -2px; 
    width: 12.5%; } 
    .button-group.even-8 li > button, .button-group.even-8 li .button { 
     border-left: 1px solid; 
     border-color: rgba(255, 255, 255, 0.5); } 
    .button-group.even-8 li:first-child button, .button-group.even-8 li:first-child .button { 
     border-left: 0; } 
    .button-group.even-8 li button, .button-group.even-8 li .button { 
     width: 100%; } 
    .button-group > li { 
    display: inline-block; 
    margin: 0 -2px; } 
    .button-group > li > button, .button-group > li .button { 
     border-left: 1px solid; 
     border-color: rgba(255, 255, 255, 0.5); } 
    .button-group > li:first-child button, .button-group > li:first-child .button { 
     border-left: 0; } 
    .button-group.stack > li { 
    display: block; 
    margin: 0; 
    float: none; } 
    .button-group.stack > li > button, .button-group.stack > li .button { 
     border-left: 1px solid; 
     border-color: rgba(255, 255, 255, 0.5); } 
    .button-group.stack > li:first-child button, .button-group.stack > li:first-child .button { 
     border-left: 0; } 
    .button-group.stack > li > button, .button-group.stack > li .button { 
     border-color: rgba(255, 255, 255, 0.5); 
     border-left-width: 0; 
     border-top: 1px solid; 
     display: block; 
     margin: 0; } 
    .button-group.stack > li > button { 
     width: 100%; } 
    .button-group.stack > li:first-child button, .button-group.stack > li:first-child .button { 
     border-top: 0; } 
    .button-group.stack-for-small > li { 
    display: inline-block; 
    margin: 0 -2px; } 
    .button-group.stack-for-small > li > button, .button-group.stack-for-small > li .button { 
     border-left: 1px solid; 
     border-color: rgba(255, 255, 255, 0.5); } 
    .button-group.stack-for-small > li:first-child button, .button-group.stack-for-small > li:first-child .button { 
     border-left: 0; } 
    @media only screen and (max-width: 40em) { 
     .button-group.stack-for-small > li { 
     display: block; 
     margin: 0; 
     width: 100%; } 
     .button-group.stack-for-small > li > button, .button-group.stack-for-small > li .button { 
      border-left: 1px solid; 
      border-color: rgba(255, 255, 255, 0.5); } 
     .button-group.stack-for-small > li:first-child button, .button-group.stack-for-small > li:first-child .button { 
      border-left: 0; } 
     .button-group.stack-for-small > li > button, .button-group.stack-for-small > li .button { 
      border-color: rgba(255, 255, 255, 0.5); 
      border-left-width: 0; 
      border-top: 1px solid; 
      display: block; 
      margin: 0; } 
     .button-group.stack-for-small > li > button { 
      width: 100%; } 
     .button-group.stack-for-small > li:first-child button, .button-group.stack-for-small > li:first-child .button { 
      border-top: 0; } } 
    .button-group.radius > * { 
    display: inline-block; 
    margin: 0 -2px; } 
    .button-group.radius > * > button, .button-group.radius > * .button { 
     border-left: 1px solid; 
     border-color: rgba(255, 255, 255, 0.5); } 
    .button-group.radius > *:first-child button, .button-group.radius > *:first-child .button { 
     border-left: 0; } 
    .button-group.radius > *, 
    .button-group.radius > * > a, 
    .button-group.radius > * > button, 
    .button-group.radius > * > .button { 
     border-radius: 0; } 
    .button-group.radius > *:first-child, .button-group.radius > *:first-child > a, .button-group.radius > *:first-child > button, .button-group.radius > *:first-child > .button { 
     -webkit-border-bottom-left-radius: 3px; 
     -webkit-border-top-left-radius: 3px; 
     border-bottom-left-radius: 3px; 
     border-top-left-radius: 3px; } 
    .button-group.radius > *:last-child, .button-group.radius > *:last-child > a, .button-group.radius > *:last-child > button, .button-group.radius > *:last-child > .button { 
     -webkit-border-bottom-right-radius: 3px; 
     -webkit-border-top-right-radius: 3px; 
     border-bottom-right-radius: 3px; 
     border-top-right-radius: 3px; } 
    .button-group.radius.stack > * { 
    display: block; 
    margin: 0; } 
    .button-group.radius.stack > * > button, .button-group.radius.stack > * .button { 
     border-left: 1px solid; 
     border-color: rgba(255, 255, 255, 0.5); } 
    .button-group.radius.stack > *:first-child button, .button-group.radius.stack > *:first-child .button { 
     border-left: 0; } 
    .button-group.radius.stack > * > button, .button-group.radius.stack > * .button { 
     border-color: rgba(255, 255, 255, 0.5); 
     border-left-width: 0; 
     border-top: 1px solid; 
     display: block; 
     margin: 0; } 
    .button-group.radius.stack > * > button { 
     width: 100%; } 
    .button-group.radius.stack > *:first-child button, .button-group.radius.stack > *:first-child .button { 
     border-top: 0; } 
    .button-group.radius.stack > *, 
    .button-group.radius.stack > * > a, 
    .button-group.radius.stack > * > button, 
    .button-group.radius.stack > * > .button { 
     border-radius: 0; } 
    .button-group.radius.stack > *:first-child, .button-group.radius.stack > *:first-child > a, .button-group.radius.stack > *:first-child > button, .button-group.radius.stack > *:first-child > .button { 
     -webkit-top-left-radius: 3px; 
     -webkit-top-right-radius: 3px; 
     border-top-left-radius: 3px; 
     border-top-right-radius: 3px; } 
    .button-group.radius.stack > *:last-child, .button-group.radius.stack > *:last-child > a, .button-group.radius.stack > *:last-child > button, .button-group.radius.stack > *:last-child > .button { 
     -webkit-bottom-left-radius: 3px; 
     -webkit-bottom-right-radius: 3px; 
     border-bottom-left-radius: 3px; 
     border-bottom-right-radius: 3px; } 
    @media only screen and (min-width: 40.0625em) { 
    .button-group.radius.stack-for-small > * { 
     display: inline-block; 
     margin: 0 -2px; } 
     .button-group.radius.stack-for-small > * > button, .button-group.radius.stack-for-small > * .button { 
     border-left: 1px solid; 
     border-color: rgba(255, 255, 255, 0.5); } 
     .button-group.radius.stack-for-small > *:first-child button, .button-group.radius.stack-for-small > *:first-child .button { 
     border-left: 0; } 
     .button-group.radius.stack-for-small > *, 
     .button-group.radius.stack-for-small > * > a, 
     .button-group.radius.stack-for-small > * > button, 
     .button-group.radius.stack-for-small > * > .button { 
     border-radius: 0; } 
     .button-group.radius.stack-for-small > *:first-child, .button-group.radius.stack-for-small > *:first-child > a, .button-group.radius.stack-for-small > *:first-child > button, .button-group.radius.stack-for-small > *:first-child > .button { 
     -webkit-border-bottom-left-radius: 3px; 
     -webkit-border-top-left-radius: 3px; 
     border-bottom-left-radius: 3px; 
     border-top-left-radius: 3px; } 
     .button-group.radius.stack-for-small > *:last-child, .button-group.radius.stack-for-small > *:last-child > a, .button-group.radius.stack-for-small > *:last-child > button, .button-group.radius.stack-for-small > *:last-child > .button { 
     -webkit-border-bottom-right-radius: 3px; 
     -webkit-border-top-right-radius: 3px; 
     border-bottom-right-radius: 3px; 
     border-top-right-radius: 3px; } } 
    @media only screen and (max-width: 40em) { 
    .button-group.radius.stack-for-small > * { 
     display: block; 
     margin: 0; } 
     .button-group.radius.stack-for-small > * > button, .button-group.radius.stack-for-small > * .button { 
     border-left: 1px solid; 
     border-color: rgba(255, 255, 255, 0.5); } 
     .button-group.radius.stack-for-small > *:first-child button, .button-group.radius.stack-for-small > *:first-child .button { 
     border-left: 0; } 
     .button-group.radius.stack-for-small > * > button, .button-group.radius.stack-for-small > * .button { 
     border-color: rgba(255, 255, 255, 0.5); 
     border-left-width: 0; 
     border-top: 1px solid; 
     display: block; 
     margin: 0; } 
     .button-group.radius.stack-for-small > * > button { 
     width: 100%; } 
     .button-group.radius.stack-for-small > *:first-child button, .button-group.radius.stack-for-small > *:first-child .button { 
     border-top: 0; } 
     .button-group.radius.stack-for-small > *, 
     .button-group.radius.stack-for-small > * > a, 
     .button-group.radius.stack-for-small > * > button, 
     .button-group.radius.stack-for-small > * > .button { 
     border-radius: 0; } 
     .button-group.radius.stack-for-small > *:first-child, .button-group.radius.stack-for-small > *:first-child > a, .button-group.radius.stack-for-small > *:first-child > button, .button-group.radius.stack-for-small > *:first-child > .button { 
     -webkit-top-left-radius: 3px; 
     -webkit-top-right-radius: 3px; 
     border-top-left-radius: 3px; 
     border-top-right-radius: 3px; } 
     .button-group.radius.stack-for-small > *:last-child, .button-group.radius.stack-for-small > *:last-child > a, .button-group.radius.stack-for-small > *:last-child > button, .button-group.radius.stack-for-small > *:last-child > .button { 
     -webkit-bottom-left-radius: 3px; 
     -webkit-bottom-right-radius: 3px; 
     border-bottom-left-radius: 3px; 
     border-bottom-right-radius: 3px; } } 
    .button-group.round > * { 
    display: inline-block; 
    margin: 0 -2px; } 
    .button-group.round > * > button, .button-group.round > * .button { 
     border-left: 1px solid; 
     border-color: rgba(255, 255, 255, 0.5); } 
    .button-group.round > *:first-child button, .button-group.round > *:first-child .button { 
     border-left: 0; } 
    .button-group.round > *, 
    .button-group.round > * > a, 
    .button-group.round > * > button, 
    .button-group.round > * > .button { 
     border-radius: 0; } 
    .button-group.round > *:first-child, .button-group.round > *:first-child > a, .button-group.round > *:first-child > button, .button-group.round > *:first-child > .button { 
     -webkit-border-bottom-left-radius: 1000px; 
     -webkit-border-top-left-radius: 1000px; 
     border-bottom-left-radius: 1000px; 
     border-top-left-radius: 1000px; } 
    .button-group.round > *:last-child, .button-group.round > *:last-child > a, .button-group.round > *:last-child > button, .button-group.round > *:last-child > .button { 
     -webkit-border-bottom-right-radius: 1000px; 
     -webkit-border-top-right-radius: 1000px; 
     border-bottom-right-radius: 1000px; 
     border-top-right-radius: 1000px; } 
    .button-group.round.stack > * { 
    display: block; 
    margin: 0; } 
    .button-group.round.stack > * > button, .button-group.round.stack > * .button { 
     border-left: 1px solid; 
     border-color: rgba(255, 255, 255, 0.5); } 
    .button-group.round.stack > *:first-child button, .button-group.round.stack > *:first-child .button { 
     border-left: 0; } 
    .button-group.round.stack > * > button, .button-group.round.stack > * .button { 
     border-color: rgba(255, 255, 255, 0.5); 
     border-left-width: 0; 
     border-top: 1px solid; 
     display: block; 
     margin: 0; } 
    .button-group.round.stack > * > button { 
     width: 100%; } 
    .button-group.round.stack > *:first-child button, .button-group.round.stack > *:first-child .button { 
     border-top: 0; } 
    .button-group.round.stack > *, 
    .button-group.round.stack > * > a, 
    .button-group.round.stack > * > button, 
    .button-group.round.stack > * > .button { 
     border-radius: 0; } 
    .button-group.round.stack > *:first-child, .button-group.round.stack > *:first-child > a, .button-group.round.stack > *:first-child > button, .button-group.round.stack > *:first-child > .button { 
     -webkit-top-left-radius: 1rem; 
     -webkit-top-right-radius: 1rem; 
     border-top-left-radius: 1rem; 
     border-top-right-radius: 1rem; } 
    .button-group.round.stack > *:last-child, .button-group.round.stack > *:last-child > a, .button-group.round.stack > *:last-child > button, .button-group.round.stack > *:last-child > .button { 
     -webkit-bottom-left-radius: 1rem; 
     -webkit-bottom-right-radius: 1rem; 
     border-bottom-left-radius: 1rem; 
     border-bottom-right-radius: 1rem; } 
    @media only screen and (min-width: 40.0625em) { 
    .button-group.round.stack-for-small > * { 
     display: inline-block; 
     margin: 0 -2px; } 
     .button-group.round.stack-for-small > * > button, .button-group.round.stack-for-small > * .button { 
     border-left: 1px solid; 
     border-color: rgba(255, 255, 255, 0.5); } 
     .button-group.round.stack-for-small > *:first-child button, .button-group.round.stack-for-small > *:first-child .button { 
     border-left: 0; } 
     .button-group.round.stack-for-small > *, 
     .button-group.round.stack-for-small > * > a, 
     .button-group.round.stack-for-small > * > button, 
     .button-group.round.stack-for-small > * > .button { 
     border-radius: 0; } 
     .button-group.round.stack-for-small > *:first-child, .button-group.round.stack-for-small > *:first-child > a, .button-group.round.stack-for-small > *:first-child > button, .button-group.round.stack-for-small > *:first-child > .button { 
     -webkit-border-bottom-left-radius: 1000px; 
     -webkit-border-top-left-radius: 1000px; 
     border-bottom-left-radius: 1000px; 
     border-top-left-radius: 1000px; } 
     .button-group.round.stack-for-small > *:last-child, .button-group.round.stack-for-small > *:last-child > a, .button-group.round.stack-for-small > *:last-child > button, .button-group.round.stack-for-small > *:last-child > .button { 
     -webkit-border-bottom-right-radius: 1000px; 
     -webkit-border-top-right-radius: 1000px; 
     border-bottom-right-radius: 1000px; 
     border-top-right-radius: 1000px; } } 
    @media only screen and (max-width: 40em) { 
    .button-group.round.stack-for-small > * { 
     display: block; 
     margin: 0; } 
     .button-group.round.stack-for-small > * > button, .button-group.round.stack-for-small > * .button { 
     border-left: 1px solid; 
     border-color: rgba(255, 255, 255, 0.5); } 
     .button-group.round.stack-for-small > *:first-child button, .button-group.round.stack-for-small > *:first-child .button { 
     border-left: 0; } 
     .button-group.round.stack-for-small > * > button, .button-group.round.stack-for-small > * .button { 
     border-color: rgba(255, 255, 255, 0.5); 
     border-left-width: 0; 
     border-top: 1px solid; 
     display: block; 
     margin: 0; } 
     .button-group.round.stack-for-small > * > button { 
     width: 100%; } 
     .button-group.round.stack-for-small > *:first-child button, .button-group.round.stack-for-small > *:first-child .button { 
     border-top: 0; } 
     .button-group.round.stack-for-small > *, 
     .button-group.round.stack-for-small > * > a, 
     .button-group.round.stack-for-small > * > button, 
     .button-group.round.stack-for-small > * > .button { 
     border-radius: 0; } 
     .button-group.round.stack-for-small > *:first-child, .button-group.round.stack-for-small > *:first-child > a, .button-group.round.stack-for-small > *:first-child > button, .button-group.round.stack-for-small > *:first-child > .button { 
     -webkit-top-left-radius: 1rem; 
     -webkit-top-right-radius: 1rem; 
     border-top-left-radius: 1rem; 
     border-top-right-radius: 1rem; } 
     .button-group.round.stack-for-small > *:last-child, .button-group.round.stack-for-small > *:last-child > a, .button-group.round.stack-for-small > *:last-child > button, .button-group.round.stack-for-small > *:last-child > .button { 
     -webkit-bottom-left-radius: 1rem; 
     -webkit-bottom-right-radius: 1rem; 
     border-bottom-left-radius: 1rem; 
     border-bottom-right-radius: 1rem; } } 

.button-bar:before, .button-bar:after { 
    content: " "; 
    display: table; } 
.button-bar:after { 
    clear: both; } 
.button-bar .button-group { 
    float: left; 
    margin-right: 0.625rem; } 
    .button-bar .button-group div { 
    overflow: hidden; } 

Foundation 6 Fiddle