複数の行を持つボタングループのブートストラップのボタンの丸い角

Question

現在、ボタングループの最後と最初のボタンに丸い角を配置したいと考えています。現時点では、グループ内の最初と最後のボタンが丸められていますが、各行にこのようにしたいと思います。 この（ブートストラップから標準ボタン-groups.lessから）それのために使用されている現在のCSSれる：

.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) { 
border-top-right-radius: 0; 
border-bottom-right-radius: 0; 
} 

border: 1px solid transparent; 
border-radius: 4px; 

HTML（ディレクティブ）：

<div class="btn-group"> 
<button type="button" class="btn btn-default btn-sm btn-filter" 
    ng-repeat="option in options track by $index" 
    ng-class="{active:isSelected(option)}" 
    ng-click="toggleSelect(option)">{{option.caption}}</button> 
</div> 

結果この時点では、次のとおりです。 Screenshot of the (not-)rounded buttons

どのようにして、btnグループの各行の最初と最後のボタンが角を丸くすることができますか？

Answer 1

あなたはこの方法（または類似の）行を検出するためのスクリプトを使用することができます。その後

function detectRows() { 
 
    $('.detect-rows').each(function(i) { 
 
    \t var thisContainer = $(this); 
 
     var row = 0; 
 
     var offsetY = -1; 
 
     var previousButton = null; 
 
     var thisButtons = thisContainer.find('button'); 
 
     var totalButtons = thisButtons.length; 
 
     thisButtons.each(function(j) { 
 
      var thisButton = $(this); 
 
      var thisOffsetY = thisButton.offset().top; 
 
      console.log('thisOffsetY: ' + thisOffsetY) 
 
      if(thisOffsetY>offsetY) { 
 
       offsetY = thisOffsetY; 
 
       row++; 
 
       thisButton.attr('data-first', 'Y'); 
 
       if(previousButton) { 
 
        previousButton.attr('data-last', 'Y'); 
 
       }; 
 
      }; 
 
      if(totalButtons==(j+1)) { 
 
      \t thisButton.attr('data-last', 'Y'); 
 
      }; 
 
      thisButton.attr('data-row', row); 
 
      previousButton = thisButton; 
 
     }); 
 
    }); 
 
}; 
 
$(window).on('resize', detectRows) 
 
detectRows();

button { 
 
    border: 1px solid black; 
 
} 
 
button[data-row="1"] { 
 
    color: green; 
 
} 
 
button[data-row="2"] { 
 
    color: red; 
 
} 
 
button[data-row="3"] { 
 
    color: orange; 
 
} 
 
button[data-first="Y"] { 
 
    border-top-left-radius: 5px; 
 
    border-bottom-left-radius: 5px; 
 
} 
 
button[data-last="Y"] { 
 
    border-top-right-radius: 5px; 
 
    border-bottom-right-radius: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="detect-rows"> 
 
    <button>I BUTTON</button> <button>I BUTTON</button> <button>I BUTTON</button> <button>I BUTTON</button> <button>I BUTTON</button> <button>I BUTTON</button> <button>I BUTTON</button> <button>I BUTTON</button> <button>I BUTTON</button> <button>I BUTTON</button> <button>I BUTTON</button> <button>I BUTTON</button> 
 
</div>

は、あなたはCSSスタイルの属性を持っています。

JSFidleでも。