中心模态（Twitter Bootstrap）

Question

所以我正在使用ASP.NET MVC创建一个网站，我遇到了我制作模式的问题。在我使用模态并且它正常工作之前，它正在中间弹出。但是现在当我试图在新网站上放置一个模态时，我正在制作模态出现在右侧，你只能看到它的1/8。但是，如果您要恢复浏览器，您可以完美地看到它。我真的不知道为什么会这样。我希望有一个人可以帮助我。先感谢您。这是.cshtml代码：

这就是我称之为模态的地方：

<div class="col-md-4 col-sm-6 p-1 animated umScaleIn">
    <div class="project-item">
        <img src="~/Content/mytemplate/img/mucisian/5SOS.jpg" />
        <div class="overlay">
            <h4><a href="#5SOSModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">5 Seconds of Summer</a></h4>
        </div>
    </div>
</div>

这是模式：

<div id="5SOSModal" class="modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <button data-dismiss="modal" class="close"><span>&times;</span></button>
                <h3 class="modal-title"> 5 Seconds of Summer </h3>
            </div>

            <div class="modal-body">
                <figure>
                    <img src="~/Content/mytemplate/img/mucisian/5SOS.jpg" />
                </figure>
                <div class="offer-content text-center">
                    <h4>5SOS 5SOS</h4>
                    <p>Sed sagittis nunc vel tellus ultricies auctor. Class aptent taciti sociosqu ad litora torquent per conubia , per inceptos himenaeos. Integer eleifend tellu.</p>
                    <span class="offer-left"><i></i></span>
                    <span class="offer-right"><i></i></span>
                </div>
            </div>

            <div class="modal-footer">
                <a href="#" data-toggle="modal" data-backdrop="static" data-keyboard="false" class="shortcode_button">Exit</a>
            </div>
        </div>
    </div>
</div>

模态的CSS：

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  display: none;
  overflow: auto;
  overflow-y: scroll;
}

.modal-dialog {
  z-index: 1050;
  width: auto;
  padding: 10px;
  margin-right: auto;
  margin-left: auto;
}