Bootstrap margin-left button styles: -1px when you click outside this area

advertisements

I've use bootstrap in my project, like this below

<div class="input-group">
  <input type="text" class="form-control input-lg" autofocus>
  <span class="input-group-btn">
    <button class="btn btn-primary btn-lg" type="button">search</button>
  </span>
</div>

and in Bootstrap, I saw :

.input-group-btn:last-child > .btn {
    margin-left: -1px;
}

So I write some CSS to avoid the useless margin-left:-1px; but I still have a problem:

When I click the area outside the <div class="input-group search-bar">, the button still have a effort like margin-left:-1px;

I'm confused, should I write some JavaScript to avoid this?


From the bootstrap source code on Github, these -1px styles are used when having button groups where the buttons align next to each other from doubling the border. If you place 2 buttons with a 1px border next to each other, you create visually a 2px border. The -1px shifts the button over so that the border is not doubled.

Comment from actual github source:

// Prevent double borders when buttons are next to each other