如何使Bootstrap模式对话框移动友好

Question

我有以下模态对话框：

<div class="modal fade" id="theCoolestModal" tabindex="-1" role="dialog" ng-controller="theCoolestCtrl" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" role="document">
        <div class="modal-content">

            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">Terms of Use</h4>
            </div>
            <div class="modal-body">
                <p ng-bind-html="policyText"></p>
                <br />
                <div class="checkbox">
                    <label><input type="checkbox" value="" ng-click="toggleChecked()">I acknowledge the Terms of Use</label>
                </div>
                <br />
                <br />
                <button type="button" class="btn btn-secondary btn-lg" disabled ng-if="!termsChecked">Accept Terms</button>
                <button type="button" class="btn btn-lg btn-primary" ng-if="termsChecked" ng-click="acceptTermsOfUse(PersonIdentifier, escortPolicyId)">Accept Terms</button>
            </div>
        </div>
    </div>
</div>

现在，我试图利用Bootstrap网格系统，但无济于事。使用垂直电话尺寸屏幕时，模态对话框无法正常工作。对于比这更大的东西，这是一个很好的尺寸。

如何让它变得动态，适合垂直（比方说iPhone 6）屏幕，一行中的所有内容都是那么大？