채택완료

부트스트랩 버튼 오류

2016-10-31 (월) 01:22:16 6,004

안녕하세요. 현재 부트스트랩 btn btn-primary btn-block 버튼을 사용중입니다.

a50130cf4a79e3fcdd775422ffd9bde8_1477844301_8913.png

위 사진 중 윗부분 버튼 코드입니다. 부트스트랩 기존 버튼 안에 a 태그를 삽입해 버튼안의 글자를 클릭하면 설정한 링크로 연결되게 했습니다.

Copy
<button class="btn btn-primary btn-block" type="button"><a href="">버튼</a></button><button class="btn btn-primary btn-block" type="button"><a href="">버튼</a></button>

그런데 이렇게하니 버튼이 길어질경우 글자를 클릭해야만 링크가 작동하는게 불편해서 버튼을 클릭하면 링크로 연결되도록 아래처럼 바꿨습니다. 그랬더니 사진의 아랫부분처럼 버튼 두개가 자동으로 붙어버리네요...!

Copy
<a href=""><button class="btn btn-primary btn-block" type="button">버튼</button></a><a href=""><button class="btn btn-primary btn-block" type="button">버튼</button></a>

혹시 이 현상이 왜 일어나는지, 어떻게 고칠수있는지 아는분 계시면 도와주신다면 정말 감사하겠습니다!

답변 2개 / 댓글 1개

채택된 답변
+20 포인트
2016-10-31 (월) 01:34:55

<a href="url" class="btn btn-primary btn-block" role="button">링크1</a>

<a href="url" class="btn btn-primary btn-block" role="button">링크2</a>

적용 후 확인

답변에 대한 댓글 1개

2016-10-31 (월) 01:46:41
감사합니다! type="button" 말고 role="button"으로 해야하나요?
2016-10-31 (월) 04:25:44

<a> 태그와 <button> 태그 둘다 링크나 버튼형식에 태그입니다 둘이 같이 사용하지 않습니다.

답변을 작성하려면 로그인이 필요합니다.