Проблема с кнопкой начальной загрузки

Question

Итак, я пытаюсь реализовать простую область поиска с кнопкой поиска (bootstrap http://bootsnipp.com/snippets/featured/stylish-search-form), но у меня есть некоторые проблемы с кнопкой. Когда я применяю html и css из bootstrap, то, что я получаю, является скрытой кнопкой без лупы. Когда я курсирую над областью, где он должен быть, у меня есть маленький прямоугольник. Кроме того, любая идея, почему мой div.container и div.span 12 не выровнены по центру?

[no поиск кнопка] https://dl.dropboxusercontent.com/u/18019794/Screenshot%202016-12-21%2013.19.14.png! [div span-12] https://dl.dropboxusercontent.com/u/18019794/Screenshot%202016-12-21%2013.20.17.png! [div контейнер] https://dl.dropboxusercontent.com/u/18019794/Screenshot%202016-12-21%2013.20.19.png!

Мой HTML:

<div class="container"> 
    <div class="row"> 
     <div class="span12"> 
      <form id="custom-search-form" class="form-search form-horizontal"> 
       <div class="input-append span12"> 
        <input type="text" class="search-query" placeholder="Search"> 
        <button type="submit" class="btn"><i class="icon-search"></i></button> 
       </div> 
      </form> 
     </div> 
    </div> 
</div 

>

Мой CSS:

#custom-search-form { 
     margin:0; 
     margin-top: 5px; 
     padding: 0; 
    } 

    #custom-search-form .search-query { 
     padding-right: 3px; 
     padding-right: 4px \9; 
     padding-left: 3px; 
     padding-left: 4px \9; 
     /* IE7-8 doesn't have border-radius, so don't indent the padding */ 

     margin-bottom: 0; 
     -webkit-border-radius: 3px; 
     -moz-border-radius: 3px; 
     border-radius: 3px; 
    } 

    #custom-search-form button { 
     border: 0; 
     background: none; 
     /** belows styles are working good */ 
     padding: 2px 5px; 
     margin-top: 2px; 
     position: relative; 
     left: -28px; 
     /* IE7-8 doesn't have border-radius, so don't indent the padding */ 
     margin-bottom: 0; 
     -webkit-border-radius: 3px; 
     -moz-border-radius: 3px; 
     border-radius: 3px; 
    } 

    .search-query:focus + button { 
     z-index: 3; 
    } 

Answer 1

Пример вы нашли требует Bootstrap 2.3.2 и не работает в Bootstrap 3. Смотрите мой пример , он работает, когда я вызываю Bootstrap 2 (я называл css и js), и я удалил ваш css, чтобы вы могли стилизовать из чистой чистой базы:

/* 
 
#custom-search-form { 
 
     margin:0; 
 
     margin-top: 5px; 
 
     padding: 0; 
 
    } 
 

 
    #custom-search-form .search-query { 
 
     padding-right: 3px; 
 
     padding-right: 4px \9; 
 
     padding-left: 3px; 
 
     padding-left: 4px \9; 
 
*/ 
 
     /* IE7-8 doesn't have border-radius, so don't indent the padding */ 
 
/* 
 
     margin-bottom: 0; 
 
     -webkit-border-radius: 3px; 
 
     -moz-border-radius: 3px; 
 
     border-radius: 3px; 
 
    } 
 

 
    #custom-search-form button { 
 
     border: 0; 
 
     background: none; 
 
*/ 
 
     /** belows styles are working good */ 
 
     /* padding: 2px 5px; 
 
     margin-top: 2px; 
 
     position: relative; 
 
     left: -28px; 
 
*/ 
 
     /* IE7-8 doesn't have border-radius, so don't indent the padding */ 
 
/* 
 
     margin-bottom: 0; 
 
     -webkit-border-radius: 3px; 
 
     -moz-border-radius: 3px; 
 
     border-radius: 3px; 
 
    } 
 

 
    .search-query:focus + button { 
 
     z-index: 3; 
 
    } 
 
*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="span12"> 
 
      <form id="custom-search-form" class="form-search form-horizontal"> 
 
       <div class="input-append span12"> 
 
        <input type="text" class="search-query" placeholder="Search"> 
 
        <button type="submit" class="btn"><i class="icon-search"></i></button> 
 
       </div> 
 
      </form> 
 
     </div> 
 
    </div> 
 
</div