Bootstrap 3 button group: corner radius disappears after a button is hidden

Question

I have the following Bootstrap 3 button group:

  Left
         


        
                      

              相关标签:
       
      

Answer 1

A pure CSS workaround which may be an acceptable solution is to put curved ends onto the btn-group itself using :before and :after pseudo-selectors so we don't end up with a border around the whole thing. Obviously, this won't apply the corner-radius directly to your buttons (as requested) but it can look good when your buttons aren't all different colours.

NOTE: you will either ALWAYS require hidden buttons at the start and end (to square the edges), or more reasonably, remove the radius from the btn-group CSS.

Here's a fiddle, or check the snippet below.

.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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 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>

Answer 2

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)

Answer 3

AngularJS solution

For pure jQuery projects, Josh Croziers answer is correct.

But if you happen to be using AngularJS, there is a much simpler solution:

Add an ng-if="expression" to the button. When expression is true, the button will be shown, otherwise it will be removed from the DOM completely. This makes the "new" first button have rounded corners, because the :first-child selector that Bootstrap uses now selects that one.