부트 스트랩 3 - 입력 그룹 단추와 양식의 수직 정렬 문제

이상한 문제가 있습니다. 나는 정확히 this section을 따라갈 것이지만 약간의 문제가 있습니다. 버튼이 필드의 왼쪽에 정렬되면 완벽하게 정렬되지만 버튼이 오른쪽에 정렬되면 ("제출"유형 동작에 대해 더 자연 스럽다고 생각 됨) 맨 위에 패딩이 약 5-10 픽셀 있습니다. 내가 제거 할 수없는 버튼 :부트 스트랩 3 - 입력 그룹 단추와 양식의 수직 정렬 문제

Demonstration of the problem

내 코드는 다음과 같습니다 :

<div class="col-sm-7"> 
    <h3>Get the latest Amazon News first:</h3> 
    <div class="input-group"> 
     <input type="text" class="form-control" placeholder="E-mail" /> 
     <span class="input-group-btn"> 
     <button class="btn btn-default btn-group" type="submit">Sign Up</button> 
     </span> 
    </div><!-- /input-group --> 
</div><!-- /col-7 --> 
<div class="col-sm-5"> 
    <h3>Get Started Now:</h3> 
    <a class="btn btn-large btn-primary" href="#"><i class="icon-caret-right icon-space-right"></i>Start a Free Trial!</a> 
</div>

는 나는 한쪽에 작동하고 다른없는 이유를 꽤 혼란 스러워요. 어떤 도움을 주시면 감사하겠습니다!

출처

2013-09-03 Jeff W

코드에 스타일을 추가 했습니까? 그것은 [나를 위해 아주 좋아 보인다] (http://jsfiddle.net/4Gs8Z/)이기 때문에. – totymedli

사용자 정의 CSS를 작성한 경우 문제가있는 것 같습니다. 방금 html을 복사하고 bootstrap cdn css hosted 파일을 사용하여 펜을 만들었습니다. Check this pen/demo.

버튼 요소의 위와 아래에 예를 들어
의 중단 태그를 추가하기 때문입니다. 그냥 그 휴식을 제거하십시오.

출처

2013-09-03 23:07:12

안녕하세요.이 문제를 조사해 주셔서 감사합니다. 내 사용자 정의 CSS를 빗어 아무것도 찾을 수 없지만, 내가 거기에 뭔가를 설정해야합니다 동의합니다. 관리자가 적용된 맞춤 클래스는 표시하지 않지만 계속 파고 있습니다. –

@JeffW는 내 데모에서 모든 코드를 복사 한 다음 ur 시스템에서 실행 해 봅니다. –

@JeffW 어쨌든 버튼 요소의 위와 아래에 '
'이라는 중단 태그를 추가하기 때문입니다. 그냥 그 휴식을 제거하십시오. –

부트 스트랩 3 - 입력 그룹 단추와 양식의 수직 정렬 문제

답변

관련 문제