bootstrap inline-append가 검색 양식에서 작동하지 않습니다.

부트 스트랩을 사용하여 검색 표시 줄의 버튼을 http://imgur.com/vUhXh에 추가하려고했지만 작동하지 않는 것 같습니다. 그것은 educomer.herokuapp.com에 표시되고, 내 코드에 문제가 있다면 바로 볼 완전히 새로운 응용 프로그램을 만드는 시도bootstrap inline-append가 검색 양식에서 작동하지 않습니다.

 %form.form-search 
     .input-append 
      %input.span3.search-query{:placeholder => "Search Food", :type => "text"} 
      %button.btn{:type => "submit"} 
       %span.icon-search

내가 사용하고 내 코드는하지만 아니었다 문제

출처

2012-10-16 afkmaster

어떤 부트 스트랩 버전을 사용하고 있습니까? your Heroku site에 다음을 추가했습니다.

<div class="input-prepend"> 
    <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="Username"> 
</div> 
<div class="input-append"> 
    <input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span> 
</div>

그리고 예상대로 표시됩니다. 부트 스트랩의 changelog 버전 2.0.2 버전에서 "input-prepend/append 구성 요소의 버튼 지원"이 추가되었습니다.

출처

2012-10-16 04:00:10

haml에이 코드를 작성했기 때문에 2.1.0을 사용하고 있습니까? 내가 erb에서 글을 쓸 때도 잘 작동하는 것 같다. – afkmaster

imgur.com에 링크 된 마크 업을 붙여 넣을 때 ERb가 작동하지 않기 때문에 ERb에서 나에게 이상하다고 생각합니다. 불필요한 공백을 제외하고는 HAML을 사용하는 것이 효과적이지 않습니다. –

아, 예, 공백이 문제 인 것 같습니다. 부트 스트랩 예제 사이트의 마크 업을 모두 한 줄로 변경하면 버튼이 필드 옆으로 이동했습니다. > 및 <기호는 여기에 설명 된대로 추가하십시오 (http://haml.info/docs/yardoc/file.REFERENCE.html#whitespace_removal__and_). –

bootstrap inline-append가 검색 양식에서 작동하지 않습니다.

답변

관련 문제