css - 如何更改 Bootstrap 模态的位置

Question

我的模式在最右下角打开，所以所有应该可见的数据都被隐藏了；仅部分模态显示在屏幕上。
如何将其位置从右下角更改为居中？

这是我的模态代码:

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
   aria-labelledby="myModalLabel" aria-hidden="true" ng-controller="ModalCtrl">
    <div class="modal-dialog" style="text-align:center" style="align:center">
        <div class="modal-content" style="align:center">
            <div class="modal-header" >
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">
            Details
            </h4>
            </div>
            <div class="modal-body" style="align:center">
                Add some text here
                <div class="form-group" style="align:center">
                <label for="name" class="col-sm-2 control-label">Index</label>
                    <div class="col-sm-10">
                    ==={{data|json}}===
                    <br><input type="text" value="Index" class="form-control" id="s_field"  ng-required="true" readonly="readonly" />
                    <input type="text" value="{{data.index}}" ng-model="data.index" class="form-control" id="index"  ng-required="true" readonly="readonly" />
                    <br><input type="text" value="Severity"  class="form-control"  ng-required="true" readonly="readonly" />
                    <input type="text" value="{{data.S}}" ng-model="data.S" class="form-control" id="S_field"  ng-required="true" readonly="readonly" />
                    <br><input type="text" value="Service Affecting" class="form-control" ng-required="true" readonly="readonly" />
                    <input type="text" value="{{data.SA}}" ng-model="data.SA" class="form-control" id="SA_field"  ng-required="true" readonly="readonly" />     
                    <br><input type="text" value="Acknowledge Time" class="form-control" ng-required="true" readonly="readonly" />
                    <input type="text" value="{{data.AckT}}" ng-model="data.AckT" class="form-control" id="AckT_field"  ng-required="true" readonly="readonly" />
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal -->
</div>

Answer 1

我猜你没有正确使用它。 您是否覆盖了 Bootstrap CSS？