引導3實現導致所有元素的大量右移

我正在使用AJAX填充DataTable中的數據，這些DataTable都正常工作。不過，當我點擊第一個元素時，我需要一個Boostrap模式彈出窗口。引導3實現導致所有元素的大量右移

觸發是所有工作正常，但它沒有彈出我的數據表。我意識到我需要升級到Bootstrap 3.3.7來解決這個問題。 Modal現在可以正常工作。

但是現在我所有的元素都被轉移了，我不知道如何解決它。我已經嘗試永久性設置邊距和填充爲0，但這沒有任何變化。在Chrome開發工具中，我無法識別任何導致間距的元素。

我刪除了我的所有元素和所有我的個人CSS，它仍然被轉移到中心右側。

下面是腳本SRC和我使用的樣式表：

<link rel="stylesheet" href="~/Content/bootstrap.css"> 
<script src="~/scripts/jquery-1.10.2.js"></script> 


<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> 
<script src="https://cdn.datatables.net/buttons/1.0.3/js/buttons.html5.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script> 
<script src="https://cdn.datatables.net/buttons/1.2.3/js/dataTables.buttons.min.js"> </script> 
<script src="//cdn.datatables.net/buttons/1.2.3/js/buttons.flash.min.js"> </script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"> </script> 
<script src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"> </script> 
<script src="//cdn.datatables.net/buttons/1.2.3/js/buttons.html5.min.js"> </script> 
<script src="//cdn.datatables.net/buttons/1.2.3/js/buttons.print.min.js"> </script> 


<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"> 
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100&amp;lang=en"> 
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"> 
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.2.3/css/buttons.dataTables.min.css"> 

<link rel="stylesheet" href="~/Content/Site.css">

這裏是我的身體CSS：

body { 
background-color: #FFFFFF; 
font-family: "Roboto", helvetica, arial, sans-serif; 
font-size: 14px; 
font-weight: 400; 
text-rendering: optimizeLegibility; 
padding: 0 !important; 
margin: 0 !important;

}

這是我的視圖（沒有Jscript）：

<body> 
<div class="filter"> 
    <form class="my-form" method="post"> 
     <br /> 
     @Html.DropDownList("list", "Select Company") 
     <br /> 
     <br /> 
     <button input type="submit"> Submit </button> 
     <br /><br /> 
    </form> 
</div> 

<div id="ck-button"> 
    <label> 
     <input type="checkbox" id="active"><span>Active</span> 
    </label> 
    <label> 
     <input type="checkbox" id="inactive"><span>InActive</span> 
    </label> 
</div> 



<div class="scrollingTable"> 
    <table class="table-fill" id="myTable"> 
     <thead> 
      <tr> 
       <th>Stock Id</th> 
       <th>Product Group</th> 
       <th>Group Type</th> 
       <th>Item Type</th> 
       <th>Model</th> 
       <th>Serial No</th> 
       <th>NR</th> 
       <th>Status</th> 
       <th>Description</th> 
       <th>State</th> 
       <th>Date Arrived</th> 
       <th>Current Location</th> 
       <th>Terminal ID</th> 
      </tr> 
     </thead> 
     <tfoot> 
      <tr> 
       <th class="foot1">Id</th> 
       <th class="foot">Product</th> 
       <th class="foot">Group</th> 
       <th class="foot">Item</th> 
       <th class="foot">Model</th> 
       <th class="foot">Serial</th> 
       <th class="foot">NR</th> 
       <th class="foot">Status</th> 
       <th class="foot">Descr</th> 
       <th class="foot">State</th> 
       <th class="foot">Date</th> 
       <th class="foot">Location</th> 
       <th class="foot3">T-ID</th> 
      </tr> 
     </tfoot> 


    </table> 

</div> 
<div id="myModal" class="modal fade" 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> 
</body>

來源

2016-12-13 Anthony Drury

嘗試把你的代碼

<body> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
     // code here 
     </div> 
    </div> 
    </div> 
</body>

，看看它是否工作正常

來源

2016-12-14 03:20:54 osk2

引導3實現導致所有元素的大量右移

回答

相關問題