Wie kann man den Bootstrap Modal-Dialog auf einem echten iPhone reagieren lassen, wenn er bereits auf einem emulierten iPhone in Google Chrome funktioniert?

Question

Ich versuchte Bootstrap Modal Box Arbeit und machen sie anspricht, und lesen Sie diese Frage zu machen: Bootstrap Modal Dialog. Can the grid system be used within a modal context?

jedoch die Seite funktionierte gut in Google Chrome und arbeitete gut in Google Chrome simuliert iPhone 5, 6, oder 6 Plus (Hinweis: wie im Entwicklertool simuliert) - funktioniert aber nicht auf einem echten iPhone 6 Plus oder iPad (im Hochformat). (Der Text erscheint wirklich riesig).

Gibt es eine Möglichkeit, damit es funktioniert?

Der Code:

<div class="modal-body"> 
    <div class="container col-md-12"> 
     <div class="row"> 
      <p class="col-md-4"> 
       1 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
      </p> 
      <p class="col-md-4"> 
       2 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
      </p> 
      <p class="col-md-4"> 
       3 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
      </p> 
     </div> 
    </div> 
</div> 

Beispielseite auf: http://skiesof.blue/try/

P. S. Ich untersuche dieses Thema weiter. Mit meinem iPhone 6 Plus, das 9.3.1 iOS hat, so scheint es gut zu funktionieren, aber auf einem iPad mit iOS 9.0 oder 9.1, hat es dies, wenn die modale knallte besteht:

Answer 1

Scheint, wie dies ist ein iOS9-Problem und hat nichts mit dem Inhalt des Modals zu tun. Ich habe kein iPhone 6+, aber ich habe das gleiche Problem auf meinem iPad erlebt. die folgende CSS Hinzufügen machte es für mich arbeiten:

body { 
    padding-right: 0px !important 
} 

.modal-open { 
    overflow-y: auto; 
} 

https://stackoverflow.com/a/32720590/1581477

https://github.com/jschr/bootstrap-modal/issues/64#issuecomment-55794181

Answer 2

Nach bootstrap example es keine Notwendigkeit container col-md-12 nach modal-body nur Ihre html nach modal-body hinzufügen hinzuzufügen ist.

<div class="modal-body"> 
    <div class="row"> 
    <div class="col-md-3"> 
     <p>1st col 3</p> 
    </div> 
    <div class="col-md-3"> 
     <p>2nd col 3</p> 
    </div> 
    <div class="col-md-3"> 
     <p>3rd col 3</p> 
    </div> 
    <div class="col-md-3"> 
     <p>4th col 3</p> 
    </div> 
    </div> 
</div>