Question

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

.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) {
    	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。

带有多行的按钮组引导按钮上的圆角

1 个答案: