Twitter bootstrap 如何使引导模式对话框对移动设备友好

我有以下模态对话框：

<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>

使用条款



我承认使用条款




接受条件
接受条件

现在，我尝试使用引导网格系统，但没有用。模态对话框在垂直手机大小的屏幕上根本无法正常工作。这个尺寸适合所有比那个大的东西

我怎样才能使其动态化，在一个垂直（比如说iPhone 6）屏幕上，将所有内容都放在一列中，使其达到该尺寸？

检查以下答案：