Вход Boostrap не округлен больше

Question

Я пытаюсь создать окно поиска в bootstrap navbar. Я делаю это, как в примере на веб-сайте bootstrap. У меня также есть аддон в моем поисковом поле. По какой-то причине поле inout не округлено. Вот как это выглядит сейчас:

Я хочу, чтобы левая сторона также закруглялась как правая сторона аддона. Ниже мой код:

<form class="navbar-form navbar-left" id="search" role="search">          
           <button id="search-button" type="button" class="btn btn-info"> 
            <span class="glyphicon glyphicon-search"></span> 
           </button>         
           <div id="search-form" class="form-group"> 
            <div class="input-group">          
             <input type="text" class="form-control" id="search-input" placeholder="Search"> 
             <span id="search-icon" class="input-group-btn"> 
              <button class="btn btn-info"> 
               <span class="glyphicon glyphicon-search"></span> 
              </button> 
             </span> 
            </div> 
           </div> 
          </form> 

У меня есть некоторые дополнительные идентификаторы, чтобы добавить исчезающую функциональность к коробке, так же, как в this tutorial.

После добавления моего CSS я понял, что переопределив его, я исправил CSS и теперь он работает. Thanx за вашу помощь, если вы, ребята, не предложили опубликовать мой CSS, я бы не нашел его.

Answer 1

Попробуйте использовать это для класса вы хотите изменить радиус границы: Примените это к вашему HTML класса в файле CSS

border-bottom-right-radius: 5px; 
    -moz-border-radius-bottomright: 5px; 
    -webkit-border-bottom-right-radius: 5px; 
    border-top-right-radius: 5px; 
    -moz-border-radius-topright: 5px; 
    -webkit-border-top-right-radius: 5px; 
    border-bottom-left-radius: 5px; 
    -moz-border-radius-bottomright: 5px; 
    -webkit-border-bottom-left-radius: 5px; 
    border-top-left-radius: 5px; 
    -moz-border-radius-topright: 5px; 
    -webkit-border-top-left-radius: 5px; 

Голосуйте, если это помогло вам.