Bootstrap 3 按钮组:隐藏按钮后圆角半径消失 [英] Bootstrap 3 button group: corner radius disappears after a button is hidden

问题描述

我有以下 Bootstrap 3 按钮组:

<button type="button" class="btn btn-default">左</button><button type="button" class="btn btn-default">Middle</button><button type="button" class="btn btn-default">右</button>

我使用以下方法隐藏第一个按钮:

$("button:eq(0)").hide();

结果是第一个可见按钮没有圆角半径:

<块引用>

我猜 BS 说:.btn-group 的第一个孩子有边界半径而不是 .btn-group 的第一个 visible 孩子有边界-半径

有什么办法可以解决这个问题吗?

JSFIDDLE

请注意，我不想删除按钮，而是想隐藏它.

解决方案

鉴于您已经在使用 jQuery，您可以使用以下内容将类添加到第一个/最后一个可见的按钮元素.

$(".btn-group button:visible").第一的().addClass('radius-left').结尾().最后的().addClass('radius-right');

此处示例

然后您需要添加以下样式:

.btn-group >.btn.btn-default.radius-left {边框左上角半径:4px！重要；边框左下角半径:4px！重要；}.btn-group >.btn.btn-default.radius-右{边框右上角半径:4px！重要；边框右下角半径:4px！重要；}

不幸的是，!important 是覆盖默认 Bootstrap 样式所必需的.

<小时>

作为替代方案，您可以完全删除第一个按钮元素，然后在必要时将其重新添加.. $("button:eq(0)").remove(); --(示例)

I have the following Bootstrap 3 button group:

<div class="btn-group">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

I hide the first button using:

$("button:eq(0)").hide();

The result is that the first visible button doesn't have corner radius:

I guess the BS says: first child of .btn-group has border-radius instead of first visible child of .btn-group has border-radius

Is there any way to fix this?

JSFIDDLE

Note that I don't want to remove the button but to hide it.

解决方案

Given that you are already using jQuery, you could use the following to add a class to the first/last visible button elements.

$(".btn-group button:visible")
    .first()
    .addClass('radius-left')
    .end()
    .last()
    .addClass('radius-right');

EXAMPLE HERE

You would then need to add the following styling:

.btn-group > .btn.btn-default.radius-left {
    border-top-left-radius: 4px!important;
    border-bottom-left-radius: 4px!important;
}
.btn-group > .btn.btn-default.radius-right {
    border-top-right-radius: 4px!important;
    border-bottom-right-radius: 4px!important;
}

Unfortunately, !important is necessary to overwrite the default Bootstrap styling.

---

As an alternative, you could remove the first button element completely and then add it back in when necessary.. $("button:eq(0)").remove(); -- (example)

这篇关于Bootstrap 3 按钮组:隐藏按钮后圆角半径消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！