2016-07-24 3 views
-1

나는 부트 스트랩 모달을 가지고있다. 이 모달에는 두 개의 부트 스트랩 탭이 있습니다. "Work"버튼이 활성 탭입니다. "고용"버튼이 다른 탭입니다. 이러한 스타일div에서 div를 숨기고 다른 div를 표시 하시겠습니까?

@media (min-width: 992px) { 
    .col-md-8 { 
     width: 87%; 
     margin-top: 37px; 
     margin-bottom: 31px; 
    } 
    } 

문제와 .COL-MD-8 클래스와 포장이 모달은 "고용"탭의 내용이 "회사"내용보다 더 높은 폭을 가지고 있다는 것입니다. 그래서 그것은 자신의 길을 찾고 있습니다.

enter image description here

나는 누군가가 탭을 클릭합니다 "고용"때 탭 원래의 폭을 보여 "고용"해야합니다. 나는 이것이 .col-md-8 클래스로 감싸 졌기 때문에 일어난다는 것을 안다. 클릭시 주 수업을 숨기고 '대여'탭의 원래 너비를 표시 할 수있는 옵션이 없습니까? 유성을 사용하고 반응합니다.

답변

0

당신은 class.you 클래스모달-LG를 추가 할 수 있습니다 추가하여 모달-대화의 폭을 증가시킬 수있다. 고용 탭을 클릭하면 모달 너비를 확장 할 수 있습니다.

+0

폭을 늘릴 필요가 없습니다. 상위 요소입니다. – MrWeb

1

가장 좋은 방법은 jquery를 사용하는 것입니다.

당신은 일하고, 버튼을 고용하고, 작업 내용과 고용 내용을 제공해야합니다.

HTML :

<button id="work-btn">Work</button> <button id="hire-btn">Hire</button> 
<div id="work-content"> The content goes here </div> 
<div id="hire-content"> The content goes here </div> 

CSS :

.hire-content { 
display:none; 
} 

JQuery와 :이 도움이

$(document).ready(function(){ 
$("#hire-btn").click(function() { 
    $("#work-content").hide(); 
    $("#hire-content").show(); 
}); 
}); 

희망. 질문이 있으시면 언제든지 물어보십시오.

관련 문제