使用自定义 CSS（来自 HTML 模板）的引导模式无法正常工作答案

【问题标题】：Bootstrap modal using custom CSS (from HTML template) not working well使用自定义 CSS（来自 HTML 模板）的引导模式无法正常工作
【发布时间】：2015-02-02 23:24:12
【问题描述】：

我有一个引导模式，在单击按钮时会显示它。

一切都很好，但模态显示在屏幕的最右侧，我什至看不到模态页脚按钮。

我正在使用具有自定义 Bootstrap CSS 的 HTML 模板，这就是问题的原因。

这是截图：

我的模态html代码是：

    <!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <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">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

我的 jQuery 代码是：

   $('#btnSave').click(function() {
                $('#myModal').modal('show')
            });

这是使用我拥有的自定义 CSS 的 jsFiddle（来自 HTML 模板）。

http://jsfiddle.net/uuvgLnsx/1/

【问题讨论】：

这是一个 CSS 问题发布您的 css

标签： twitter-bootstrap-3 bootstrap-modal

【解决方案1】：

试试这个……

   <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="position: fixed; left: 25%; width:60%;>

【讨论】：

【解决方案2】：

问题出在这里：

@media screen and (min-width: 768px) {
  .modal-dialog {
    left: 50%;
    right: auto;
    width: 600px;
    padding-top: 30px;
    padding-bottom: 30px;
  }

“左：50%”将您的对话框推到中间。将左侧更改为自动。

【讨论】：