ブートストラップボタンでの問題

Question

検索ボタン（ブートストラップhttp://bootsnipp.com/snippets/featured/stylish-search-form）で簡単な検索ボックスを実装しようとしていますが、ボタンに問題があります。私がブートストラップからhtmlとcssを適用すると、私は虫眼鏡を持たない隠されたボタンを手に入れます。私はそれがすべき領域の上にマウスを置くと、私が持っているのは小さな四角形です。また、div.containerとdiv.span 12が中央で整列していない理由は何ですか？

[検索ボタンなし] 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 container] 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

あなたが見つかった例では、ブートストラップ2.3.2を必要とし、私の例を参照してください。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

とても良い、これまで