0
AJAXを使用して、すべて正常に動作しているDataTableのデータを入力しています。しかし、最初の要素をクリックするとBoostrap Modalポップアップが必要です。すべての要素の大きな右シフトを引き起こすブートストラップ3の実装
トリガーはすべて正常に機能していましたが、データテーブルには表示されませんでした。私はこれを修正するためにBootstrap 3.3.7にアップグレードする必要があることを認識しました。 Modalは正しく動作しました。
しかし、今ではすべての要素が正しくシフトされており、修正方法はわかりません。私はマージンとパディングを0に設定しようとしましたが、これに変更はありませんでした。 Chrome Dev Toolsでは、スペーシングの原因となる要素を特定できません。
私のすべての要素と私の個人的なCSSがすべて削除されましたが、それでも中央の右に移動しています。
はこちらをご覧ください： 以下http://imgur.com/a/ZIkkS
はスクリプト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&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">×</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>