自舉模式對話框不出現在屏幕中心

Question

我想創建一個模態對話框並使用引導模式對話框。但是，當我申請我的代碼並運行它，似乎沒有對話在屏幕的中心，但在右邊的屏幕上，就像下圖：

我有進口此鏈接，腳本來我的代碼在_Layout.cshtml：

<link href="carousel.css" rel="stylesheet" type="text/css" /> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 

並在視圖，我寫了這個：

@{ 
    ViewBag.Title = "Home Page"; 
} 

<div id="container"> 
    <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
     <ol class="carousel-indicators"> 
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
      <li data-target="#myCarousel" data-slide-to="1"></li> 
     </ol> 
     <div class="carousel-inner" role="listbox"> 
      <div class="item active"> 
       <img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="> 
      </div> 
      <div class="item"> 
       <img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="> 
      </div> 
     </div> 
     <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
      <span class="sr-only">Previous</span> 
     </a> 
     <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
      <span class="sr-only">Next</span> 
     </a> 
    </div> 
</div> 


<div class="container marketing"> 
    <div class="row"> 
     <div class="col-lg-2"> 
     </div> 
     <div class="col-lg-2"> 
      <a href="@Url.Action("Index", "Home")"> 
       <img class="img-rounded" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="750" height="250"> 
      </a> 
     </div> 
     <div class="col-lg-2"> 
     </div> 
    </div> 
</div> 

<div class="container"> 
    <h2>Modal Example</h2> 
    <!-- Trigger the modal with a button --> 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 

    <!-- Modal --> 
    <div class="modal fade" id="myModal" role="dialog"> 
     <div class="modal-dialog"> 

      <!-- Modal content--> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal">&times;</button> 
        <h4 class="modal-title">Modal Header</h4> 
       </div> 
       <div class="modal-body"> 
        <p>Some text in the modal.</p> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       </div> 
      </div> 

     </div> 
    </div> 

</div> 

爲什麼會發生這樣的嗎？謝謝。

Answer 1

您的代碼工作正常。 對話框在此代碼中成功顯示在中心。 您的項目可能有其他任何類別中斷您的對話框。