css - 将 Bootstrap 模式宽度设置为屏幕的百分比并将其居中

Question

有人可以帮我将 Bootstrap 模式的宽度设置为屏幕宽度的 75% 并将其水平居中吗？到目前为止我已经尝试过:

  <div class="container">
    <!-- Modal -->
    <div class="modal fade" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="createTemplateModal" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <!--Content-->
            <div class="modal-content">
                <!--Header-->
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">My Modal</h4>
                </div>
                <!--Body-->
                <div class="modal-body">
                  <h1>
                  Modal Body
                  </h1>
                <!--Footer-->
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
  </div>

        $('#mymodal').modal('toggle');
        $('#mymodal').on('shown.bs.modal', function() {
          var width = $(window).width() * 0.75;
          console.log('width is: ' + width);
          $(this).find(".modal-body").css("width", width);
        });

但是，这 1) 不会将宽度设置为屏幕宽度的 75%，2) 它会使模态主体的部分内容水平溢出。这是我的 fiddle :http://jsfiddle.net/dc46o5p9/

提前致谢!

Answer 1

这是片段。

$("#mymodal").modal('toggle');

.modal-dialog {
  width: 75%;
  margin: 0 auto;
}

<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet">
<div class="container">
<!-- Modal -->
    <div class="modal fade" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="createTemplateModal" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <!--Content-->
            <div class="modal-content">
                <!--Header-->
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">My Modal</h4>
                </div>
                <!--Body-->
                <div class="modal-body">
                  <h1>
                  Modal Body
                  </h1>
                <!--Footer-->
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>