bootstrap-rtl
bootstrap-rtl copied to clipboard
Multiple buttons in button group - border is nor right
I have the following html code, along with bootstrap, bootstrap-theme and bootstrap-rtl css files:
<div class="input-group">
<input class="form-control" name="book_place" required="" pattern="seat_.{3}" value="seat_076" type="text">
<div class="input-group-btn">
<button class="btn btn-default">שלום</button>
<a href="/choose/seat" class="btn btn-default">בחר</a>
</div>
</div>
This results the following:
as you can see, the right edge of the button are round, though they are suppose to be square - as you can see here.
I think this is achieved with the following rule (from line 3971 in bootstrap.css):
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
Though, I'm not 100% sure.