검도 모달 창 및 부트 스트랩 열 문제

검도 모달 창과 부트 스트랩을 사용하고 있습니다. 나는 검도 창을 가지고 두 열을 나누어야한다. 반응 형 디자인을 위해서는 row와 col-md-12와 같은 부트 스트랩 클래스를 사용해야합니다.검도 모달 창 및 부트 스트랩 열 문제

HTML :

<body> 
    <button onclick='myFunction()'>Open Window</button> 
    <div id="win1"> 
    <div class="row"> 
     <div class="col-md-6" style="border:1px solid Red;"> 
     First 
     </div> 
     <div class="col-md-6" style="border:1px solid Blue;"> 
     Second 
     </div> 
    </div> 
    </div> 
</body>

JS :

<script> 
    function myFunction() { 

     $("#win1").show().kendoWindow({ 
     width: "300px", 
     height: "200px", 
     modal: true, 
     title: "Window 1", 
     }); 
    } 
    </script>

나는 Bootstarp 클래스 행 12 개 부분으로 분할 것을 알고있다. 따라서 첫 번째 행에 첫 번째 및 두 번째 div가 표시되어야합니다. 왜 그것은 두 줄로 표시됩니다. 이것은 내

출처

2016-06-09 user2323308

는 그것은이다 그래서 난 내 글로벌 CSS에이 클래스를 추가 CSS 상자 크기 문제. 다음을 참조하십시오 : http://stackoverflow.com/questions/31140070/bootstrap-3-grid-system-does-not-work-correctly-within-a-3rd-party-styled-div-k/3 – ezanker

링크, "kendo.common-bootstrap.min.css"& "kendo.bootstrap.min.css"가 포함되었습니다. 여전히 문제는 지속됩니다. 이 문제를 해결하기 위해 내가해야 할 일이 있습니까? – user2323308

상자 크기 문제를 놓쳤습니다. kendoui 위젯에있는 부트 스트랩 요소에 대해 border-box로 설정해야합니다 : http://stackoverflow.com/questions/20979648/tabstrip-containing-bootstrap-columns – ezanker

당신이 오류가 있음을 볼 수있는 관리자 열 plunk : 이것은 부트 스트랩이 제대로로드되지 않고 CSS가 작동하지 않는 열을 만들어 사용하는 의미

Failed to load resource: net::ERR_BLOCKED_BY_CLIENT

합니다. 다음 스타일이 누락되었음을 알 수 있습니다.

수동으로 적용하면 작동하는 것을 볼 수 있습니다.

출처

2016-06-09 08:26:09

오류가 발생하지 않습니다. 부트 스트랩으로 처리해야하는 너비 50 %를 제공해야하는 이유 – user2323308

예. 알고 있습니다. 그러나 부트 스트랩에 의해 처리되지 않으므로 파일 포함 오류가 있음을 의미합니다. –

부트 스트랩 CSS가 제대로 표시되지 않아서 오류를 표시하는 이유는 무엇입니까? 부트 스트랩 href- https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css 정확하게 CSS를 엽니 다. – user2323308

flunk에서 요소를 검사하면 할당 된 너비가 없음을 알 수 있습니다. 올바른 클래스/구조를 사용했지만 Arjan Knol이 말한 것처럼로드에 실패했습니다.

다른 방법으로 부트 스트랩을로드하여로드하고 원하는 결과를 얻도록하십시오.

출처

2016-06-09 08:30:44

나는 이런 일이 일어났습니다. ezanker가 지적한 바와 같이 상자 크기 조정 문제입니다.

.border-box, .border-box * { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 

    [class^="k-"] { 
     -webkit-box-sizing: content-box; 
     -moz-box-sizing: content-box; 
     box-sizing: content-box; 
    } 
}

나는 등 검도 창, 템플릿, 내부 컨텐츠를 가하고있어이라면 내가 그 클래스로 포장 :

<div class="border-box"> 
    ...form groups, controls, etc. 
</div>

출처

2016-12-06 18:41:50

검도 모달 창 및 부트 스트랩 열 문제

답변

관련 문제