부트 스트랩 부트 스트랩과 함께이 모달을 사용하여

Question

스피 bootcards 제대로 작동하지 모달 :

<div class="modal" id="contact-update-view"> 
       <div class="modal-dialog"> 
        <div class="modal-content"> 
         <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
          <h4 class="modal-title">Update contact</h4>     
         </div> 
         <form class="form-horizontal"> 
          <div class="modal-body"> 
           <div class="form-group"> 
            <label for="contact-create-name" class="col-sm-4 control-label">Name</label> 
            <div class="col-sm-8"> 
             <div class="input-group"> 
              <div class="input-group-addon"> 
               <span class="glyphicon glyphicon-user"></span> 
              </div> 
              <input type="text" class="form-control" id="contact-create-name" name="contact-create-name" data-minlength="2" placeholder="Contact's Name" data-error="Name should atleast be 2 characters long" required /> 
              <div class="help-block with-errors"></div>  
             </div> 
            </div> 
           </div> 
           <div class="form-group"> 
            <label for="contact-create-phone" class="col-sm-4 control-label">Phone</label> 
            <div class="col-sm-8"> 
             <div class="input-group"> 
              <div class="input-group-addon"> 
               <span class="glyphicon glyphicon-phone"></span> 
              </div> 
              <input type="tel" class="form-control" id="contact-create-phone" name="contact-create-phone" placeholder="Phone Number" pattern="^(?:(?:\+?1\s*(?:[.-]\s*)?)?(?:\(\s*([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9])\s*\)|([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9]))\s*(?:[.-]\s*)?)?([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2})\s*(?:[.-]\s*)?([0-9]{4})(?:\s*(?:#|x\.?|ext\.?|extension)\s*(\d+))?$" data-error="Enter a valid phone number" required/> 
              <div class="help-block with-errors"></div> 
             </div> 
            </div> 
           </div> 
           <div class="form-group"> 
            <label for="contact-create-email" class="col-sm-4 control-label">Email</label> 
            <div class="col-sm-8"> 
             <div class="input-group"> 
              <div class="input-group-addon"> 
               <span class="glyphicon glyphicon-envelope"></span> 
              </div> 
              <input type="email" class="form-control" id="contact-create-email" name="contact-create-email" placeholder="Email" required data-error="The email is invalid"/> 
              <div class="help-block with-errors"></div> 
             </div> 
            </div> 
           </div> 
          </div> 
          <div class="modal-footer"> 
           <div class="form-group"> 
            <div class="col-sm-offset-4 col-sm-8"> 
             <button type="submit" class="btn btn-success" data-toggle="tooltip" title="Yep! Two exclamations and a question mark,arent you excited?">Add contact!</button> 
            </div> 
           </div>  
          </div> 
         </form>  
        </div> 
       </div> 
      </div> 

내가 .When I는 IT가 모달 클릭 나는 배경이 modal 위에 표시되는 찾습니다 bootcards-desktop.css from here를 사용 즉시 해산했다.

나는이 함께 모달를 엽니을 배경가 있었다 것처럼

.modal 
     z-index:1050; 
     position:fixed; 

    .modal-backdrop: 
     position:fixed; 
     z-index:1040; 

내가 모달 클릭, 그것은 (사라 :

<button type="button" class="btn btn-default btn-edit" data-toggle="modal" data-target="#contact-update-view"> 
    <span class="glyphicon glyphicon-pencil"></span> 
</button> 

나는 CSS에서이 차이를 볼 모달의 맨 위), 어떻게 모달을 부트 카드로 올바르게 작동시킬 수 있습니까?

Answer 1

부트 스트랩 3.3.1 문제가 아니며 부트 카드 문제도 아닙니다. 설정에 문제가 있습니다. bootcards-desktop.min.css 파일 (Android 및 iOS 버전과 마찬가지로)은 Bootcrap CSS 파일뿐만 아니라 Bootstrap (현재 v3.2.0)의 연결 버전입니다. 이것은 HTTP 요청을 줄이기 위해 제공됩니다. Bootcards 다운로드의 dist 폴더에는 기본 제공 Bootstrap이없는 CSS 파일의 버전이 있습니다.이 파일에는 -lite 접미사가 붙습니다 (크기가 더 작습니다 ...).

Plunkr에서 부트 스트랩 버전을 v3.3.1로 변경하고 bootcards-desktop.min.css을 bootcards-desktop-lite.min.css으로 변경하면 모두 다시 작동합니다.

곧 Bootstrap v3.3.1을 확장 할 다른 버전의 Bootcards를 출시 할 예정입니다.