minhur 부트 스트랩 토글이 모달로 전체 너비로 표시되지 않지만 그 밖의 곳에서는

Question

Bootstrap Toggle 플러그인을 사용하려고하지만 긴 텍스트의 경우 모달에 예상대로 표시되지 않습니다. JSFiddle

코드 :

<input type="checkbox" name="toggle-checkbox" checked> 
$("[name='toggle-checkbox']").bootstrapToggle({ 
    on: 'Enabled', 
    off: 'Disabled' 
}); 

결과를 원하는 생산하고 Bootstrap Switch라는 또 다른 플러그인이 있습니다.

그러나 두 번째 플러그인이 더 많은 부동산을 사용하고는, 그러므로 나는이 작동하는 최초의 하나를 얻을하고자하고있다. 두 플러그인의 JSFiddle : JSFiddle

Answer 1

문제는 단추가 예상 된 모달 내에서 잘못된 너비 값을 얻고 있다는 것입니다.

div로 입력을 싸서 해당 div에 맞춤 CSS 클래스를 지정하기 만하면됩니다. 그런 다음 토글을 선택하고 CSS를 통해 스타일을 지정하여 너비가 94px로 유지됩니다.

버튼 옆에 표시되어야하는 모든 것이 이제는 해당 div 안에 있어야한다는 것을 명심하십시오. 물론 원하는대로 새로운 토글 클래스를 사용자 정의 할 수도 있습니다.

HTML :

<div class="toggling"> 
    <input type="checkbox" name="toggle-checkbox" checked> 
</div> 

CSS :

.toggling > .toggle { 
    width: 94px !important 
} 

UPDATE

또 다른 옵션은 아마 하나 더 나은 단순히 API 문서 등의 데이터 속성을 통해 폭을 설정하는 것입니다 제안해라.

<input type="checkbox" name="toggle-checkbox" checked data-width=94> 

이제 맞춤 CSS 클래스를 다루지 않아도됩니다.