多行按钮组引导程序中按钮上的圆角答案

【问题标题】：Round corners on buttons in button group bootstrap with multiple rows多行按钮组引导程序中按钮上的圆角
【发布时间】：2018-05-24 20:26:15
【问题描述】：

我目前正在寻找在按钮组中的最后一个和第一个按钮上放置圆角。目前，我们已将组中的第一个和最后一个按钮四舍五入，但我们希望每一行都像这样。这是当前使用的 CSS（来自 bootstrap 的标准 button-groups.less）：

.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 组每一行的第一个和最后一个按钮都变成圆角？

【问题讨论】：

请分享html代码。
你想要的是不可能的，css不知道“新行”。将它们全部放在一行中或使用脚本设置其他按钮类。
@kmg 现在也添加了 HTML。
@skobaljic 没有空间将它们全部放在一行中。我将如何编写脚本来检测行中的最后一个和第一个按钮？
一行的item数会不会一致？

标签： html css twitter-bootstrap angular

【解决方案1】：

您可以使用脚本以这种方式（或类似方式）检测行：

function detectRows() {
    $('.detect-rows').each(function(i) {
    	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) ) {
            	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。

【讨论】：