Группа кнопок Bootstrap 3: радиус угла исчезает после того, как кнопка скрыта

У меня есть следующая группа кнопок Bootstrap 3:

<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>

Я скрою первую кнопку, используя:

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

В результате первая видимая кнопка не имеет радиуса угла:

Я предполагаю, что BS говорит: первый дочерний элемент .btn-group имеет радиус границы, а не первый видимый дочерний элемент .btn-group имеет радиус границы

Есть ли способ исправить это?

JSFIDDLE

Обратите внимание, что я не хочу удалять кнопку, но скрывать ее.

Ответы

Ответ 1

Учитывая, что вы уже используете jQuery, вы можете использовать следующее, чтобы добавить класс к элементам первой/последней видимой кнопки.

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

ПРИМЕР ЗДЕСЬ

Затем вам нужно будет добавить следующий стиль:

.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;
}

К сожалению, !important необходимо перезаписать стиль Bootstrap по умолчанию.

В качестве альтернативы вы можете полностью удалить первый элемент кнопки, а затем добавить его при необходимости.. $("button:eq(0)").remove(); - (пример)

Ответ 2

Угловое решение

Для чистых проектов jQuery ответ Джоша Крозье правильный.

Но если вы используете AngularJS, есть гораздо более простое решение:

Добавьте кнопку ng-if="expression" к кнопке. Когда expression истинно, кнопка будет показана, иначе она будет полностью удалена из DOM. Это означает, что "новая" первая кнопка имеет закругленные углы, потому что селектор :first-child, который использует Bootstrap, теперь выбирает этот.

Ответ 3

A чистый CSS обходной путь, который может быть приемлемым решением, состоит в том, чтобы положить изогнутые концы на сам btn-группу, используя: before и: после псевдоселекторов, чтобы мы не попадали в границу вокруг всего этого. Очевидно, что это не будет относить угловой радиус непосредственно к вашим кнопкам (по запросу), но он может выглядеть хорошо, когда ваши кнопки не все разные цвета.

ПРИМЕЧАНИЕ: вы либо ВСЕГДА потребуете скрытых кнопок в начале и в конце (для округления краев) или более разумно, удалите радиус из CSS-группы btn.

Здесь скрипка или снимок ниже.

.btn-group{
  margin:20px; /* just for the demo */
}

.btn-group:before,.btn-group:after{
  display:block;
  float:left;
  content:".";
  color:transparent;
  /* WARNING: 
  Matching the bootstrap rules here, this can change when size rules (sm,xs) are applied to buttons 
  */
  padding: 6px 3px;
  font-size: 14px;
  border:1px solid #ccc;
}

.btn-group:before{
  border-radius: 4px 0 0 4px;
  border-right:none;
}

.btn-group:after{
  border-radius: 0 4px 4px 0;
  border-left:none;
}

/* WARNING: hard-coding bootstrap colour values, for demo-purposes, not recommended */
.btn-group.primary:before,.btn-group.primary:after{
  background-color:#337ab7;
  border-color:#2e6da4;
}

/* WARNING: hard-coding bootstrap colour values, for demo-purposes, not recommended */
.btn-group.info:before,.btn-group.info:after{
  background-color:#5bc0de;
  border-color:#46b8da;
}

<link href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'; return false;" rel="stylesheet"/>

<div class="btn-group">
  <a href="#" class="btn btn-default hidden">One</a>
  <a href="#" class="btn btn-default">Two</a>
  <a href="#" class="btn btn-default">Three</a>
  <a href="#" class="btn btn-default">Four</a>
  <a href="#" class="btn btn-default hidden">Five</a>
</div>


<div class="btn-group">
  <a href="#" class="btn btn-default hidden">One</a>
  <a href="#" class="btn btn-success">Two</a>
  <a href="#" class="btn btn-danger">Three</a>
  <a href="#" class="btn btn-warning">Four</a>
  <a href="#" class="btn btn-default hidden">Five</a>
</div>

<div class="btn-group primary">
  <a href="#" class="btn btn-primary hidden">One</a>
  <a href="#" class="btn btn-primary">Two</a>
  <a href="#" class="btn btn-primary">Three</a>
  <a href="#" class="btn btn-primary">Four</a>
  <a href="#" class="btn btn-primary hidden">Five</a>
</div>

<div class="btn-group info">
  <a href="#" class="btn btn-info hidden">One</a>
  <a href="#" class="btn btn-info">Two</a>
  <a href="#" class="btn btn-info">Three</a>
  <a href="#" class="btn btn-info">Four</a>
  <a href="#" class="btn btn-info hidden">Five</a>
</div>