Google 검색 바 twitter-bootstrap

Question

Google 스타일의 중심 검색 막대를 사용하여 일반 색인 페이지를 만들려고합니다.하지만 Twitter Bootstrap을 사용하여보기 좋은 콘텐츠를 얻으려고 애 쓰고 있습니다.

검색 창의 끝에 (오른쪽)에 검색 아이콘 단추가 추가되어야합니다. 나는 드롭 다운 검색 제안 시스템을 코드화 할 계획으로 선행을 사용했다.

<div class="hero-unit"> 
<div class="input-append"> 
    <input type="text" data-provider="typeahead" class="input-large" 
    placeholder="What do you want to know?" autocomplete="off"> 
    <button type="submit" class="btn-large btn-success"> 
    <i class="icon-search"></i> 
    </button> 
</div> 

또한 트위터 부트 스트랩의 안정 버전의 표준 텍스트 상자보다 (키가) 큰, 기능이 아직 제공되지해야합니다, 따라서 CSS는 난의 상단에 넣어 있었다 페이지. 음의 여백을 사용하는 것이었다

<style> 
input[class=input-large] { 
    width: 540px; 
    height: 24px; 
    margin-bottom: 10px; 
    margin-right: -7px; 
    line-height: 30px; 
    padding: 11px 19px; 
    font-size: 17.5px; 
    -webkit-border-radius: 6px; 
     -moz-border-radius: 6px; 
      border-radius: 6px; 
    } 

내가 검색 창에 검색 버튼 가까워지고의 볼 수있는 유일한 방법

은 (당신이 BTN-큰 사용할 때 차이가 나타납니다). 내가 자랑스러워하는 것이 아닌, 매우 지저분 해 보인다.

나는 이것에 대한 지침을 주시면 감사하겠습니다. 미리 감사드립니다.

Answer 1

<div class='container'> 
    <div class='row'> 
     <form> 
     <div class='span3 input-append' style="margin-top:30%; margin-left:30%"> 
      <input class="span2" style="height:26px;width:400px;" id="main_search" type="text" > 
      <input class="btn btn-large btn-primary" type="button" value="search"> 
     </div> 

     </form> 
    </div> 
</div> 

Fiddle-

Updated fiddle

Answer 2

당신은 당신이 할 경우 버튼의 CSS를 조정해야합니다 extended form controls

<div class="input-append"> 
    <span class="add-on"><input id="search-button" value="Search"></span> 
    <!-- stick a search icon in there instead --> 
    <input class="span2" id="search"> 
</div> 

을 시도 할 수 있지만, (패딩, 설명) 모바일 뷰에서는 하나의 단위로 유지됩니다. 사용자 정의보기를 원한다면 어쨌든 여백을 낮추었을 것입니다.