2015-04-03 22 views
0

我的模態在極右的底部打開,因此所有應該可見的數據都隱藏起來;屏幕上只顯示模式的一部分。
如何從右下角改變位置到中心?我如何更改Bootstrap模態的位置

這裏是我的模態代碼:你不使用得當

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

回答

0

我的猜測是。 你重寫了Bootstrap的CSS嗎?

+0

歡迎來到SO。請添加這樣的回覆作爲評論,而不是回答。 – ZimSystem 2015-04-03 13:30:25

+0

我做過了,當我嘗試使用plunker執行它時正確顯示,而當我嘗試在桌面上運行時它會替換它的位置 – Dannie 2015-04-06 08:50:02