Во входной группе отсутствует радиус границы начальной загрузки 3

Question

Используя Bootstrap 3.4, почему во входной группе отсутствует весь радиус границы?

<form action="{{ route('dashboard.users.index') }}" method="get">
   <div class="input-group">
        <input type="text" name="search" class="form-control">
        <span class="input-group-btn">
           <button class="btn btn-default" type="submit">
             <i class="fa fa-search"></i>
           </button>
         </span>
     </div>
</form>

проверить элемент:

.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-group:not(:last-child)>.btn, .input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;

Должен ли я исправить это с помощью собственного css?

Answer 1

Я использую bootstrap rtl и случайно поставил его перед оригинальным bootstrap.min.css .. когда порядок изменился .. проблема исправлена ​​.. спасибо за помощь

Answer 2

Похоже, что это дизайн.Посмотрите изображение (я использовал вашу разметку, только что добавил внутренний текст в <i class="fa fa-search"></i>):

У вас есть два входа подряд.Внешние углы имеют радиус границы, но внутренние углы не имеют.И это выглядит довольно хорошо.Если вам нужно переопределить это поведение, вам нужно создать собственный CSS, который будет переопределять стили по умолчанию.